- October 24, 2020 at 9:05 am #32097digitaljoegeorgeParticipant
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.October 26, 2020 at 11:00 am #32100AllySupport StaffOctober 26, 2020 at 4:01 pm #32103digitaljoegeorgeParticipant
Thank you Ally. You can mark this post as resolved!
- You must be logged in to reply to this topic.