Images Need to Auto Resize Properly On Mobile Devices

[digitaljoegeorge]

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.

[Ally]

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

[digitaljoegeorge]

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

[Author]

Posts