Images Need to Auto Resize Properly On Mobile Devices

Home Forums Quform WordPress Images Need to Auto Resize Properly On Mobile Devices

This topic is: not resolved
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #32097
    digitaljoegeorge
    Participant

    Hello Ally,

    I have noticed an important problem that requires attention.

    Let’s use this page as an example: https://www.quform.com/examples then click Booking.

    If you open up developer tools, and toggle between the various devices you’ll come to find images don’t scale properly on mobile devices.

    Here is good proof using iphone 6/7/8 plus: https://prnt.sc/v5tcq3. Notice how the faces are cutoff.

    Here is another proof using iPad: https://prnt.sc/v5tdc5

    I have noticed this problem too when you go to my site: cubitize.com/new-request-form.

    Thankfully, after spending long hours to add CSS media queries I managed to fix the problem on my end. However, my solution is not ideal since I had to manually adjust the size (width and height) for each device pertaining to my images.

    There is a better solution I found but since I am not a coder I wanted to reach out and see if you can build this into the plugin. A lot of WordPress page builders automatically have this code built in without having to modify CSS.

    Rather than using display: inline-block, I noticed “flexible” image scaling must use a display: flex property. I have also found other websites recommending flex-wrap: wrap;

    Are there any other CSS properties we need to add to fix this issue?

    Would there be an easier way to just incorporate these changes inherently within Quform without having the user add any CSS media queries?

    Thank you so much Ally. Sorry for the lengthy post.

    #32100
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #32103
    digitaljoegeorge
    Participant

    Thank you Ally. You can mark this post as resolved!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy