Issue with mobile layout

Hello,
I am trying to keep a very similar layout to the desktop version, but the mobile version is stretched really long. How can I easily resolve this? I can’t stick a button on top of an image, so struggling to figure out the mobile version.

Hello @johnsonmm,

Thanks for writing in! You are using two columns. The left side has the element that creates a gap while the eigh column has the button element. Please edit your page and use only one column. In the column settings, enable the “Flexbox” option and set the alignments to the Center. You will also have to set a minimum height of at least 60vh so that there is enough space to display the background images while the button is at the center of the column.

Screen Shot 2021-05-29 at 8.47.29 AM

If nothing is helping, provide us access to your site so that we can create an example page for you. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Thank you so much. That worked for the button, but the image is still REALLY stretched on the mobile version. I have included secure login details.
http://nextlevel.jmm.marketing

Hi @johnsonmm,

It seems that you have added 2 gaps of 400px which is creating the hights in mobile. I would suggest you reduce the gap to 100px for the Mobile section which is visible in small devices.

I have created a test page with the same structure and reduced the Gap for mobile and it works fine, please find the test page URL in the secure note.

Test-by-themeco-Content-Pro (8)

Hope it helps.
Thanks

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.