Mobile images/layout issues

[calicott]

Hello,

I am having a couple of issues with the mobile layout of my website. I have attached three images and I have three questions regarding this:

1. The images seem to be leaking out of my button. I used my iphone se2 to view this. How do I make this mobile friendly?

2. There is nothing really wrong with this second image, however I was wondering if it were possible to make the graphic the background for that section ONLY on mobile.

3. The layout of the “Get Connected” section is all wonky. How do I center align this so it looks good on mobile?

Thanks

[ruenel]

Hey Darien,

Thanks for writing a piece of very detailed post information.

1.) When I check your site on my phone, I am not seeing any image bleed out. This is what I see:

This could be a caching issue in your mobile phone browser. Clear the cache or use private browsing mode and test it again.

2.) Your Leadership section is consists of two rows and the image was inserted as an image element. You can hide the image on a mobile or smaller screen by utilizing the “Hide During Breakpoint” option. The problem is that we do not have an option where a background image can only be visible in specific screen size.

3.) To avoid this from happening, kindly enable the “Flexbox Layout” in the column settings.

Then set the left and right margin of your image element to auto:

Lastly, instead of adding the borderlines to the headline element, you should be adding it to the entire column. Doing that will make it flexible in any other screen size.

Hope this helps. Kindly let us know how it goes.

[calicott]

Thank you! That worked to align them.

I cleared the cache on my iphone, but its still happening. I guess for now I won’t worry about that lol.

Thanks for all your help the last couple of days I appreciate it!

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.