E&P Form Builder image width on mobile

[roelvanhouten]

Hello,

I’m using the E&P Form Builder on a website that I’m building. On one of the steps I have a layered image. I have set the max width to 300 pixels, which looks fine on the desktop site. However, on mobile the image is too wide and offcenter. I’ve included some screenshots.

Is there an easy fix for this problem?

Kind regards,
Roel

[marc_a]

Hi Roel,

Thanks for reaching out.

The reason why the image in the mobile is not fit on the section is because of the max-width 300px you set. I suggest the you decrease the max width or you can set the max width to 100% to properly fit within the section.

Hope that helps.

Thank you.

[roelvanhouten]

Thanks. I’ll try that first.

[tristup]

Hi Roel,

Please let us know how it works for you.

Thanks

[roelvanhouten]

Yes this works perfectly. The image automatically scales to the available space.

Is there any way to reduce the size on other breakpoints (ie desktop or tablet)? Or should I just add smaller versions of the images to the media library?

Kind regards,
Roel

[prakash_s]

Hello Roel,

There are no settings available at the moment to resize images on different breakpoints you can achieve it by using custom CSS code through media query CSS. Please have a look at this tutorial for media query CSS. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please note that you need to learn CSS and learn how to use the browser’s element inspector before writing custom media query CSS code.

Thanks

[roelvanhouten]

Thanks. I’ll take a look. I know some css, but I always try to steer clear of custom css as much as possible.

I think I’m good for now.

Kind regards,
Roel

[prakash_s]

Hello Roel,

Glad that we are able to help you.

Have a nice weekend!
Thanks