Why does my mobile site version distort images and text?

[tinyotters]

Hi, I Built www.tinyotters.com and I’m having an issue - the Mobile version of the site has an odd way of trying to fit the text and image of the hero image at the top of the home page. Does anyone know a solution for how to get the mobile version to automatically resize so that it looks like the text and image are supposed to be together

 

[Peters69]

---

@tinyotters wrote: LAFitnessEmployeePortal

Hi, I Built www.tinyotters.com and I’m having an issue - the Mobile version of the site has an odd way of trying to fit the text and image of the hero image at the top of the home page. Does anyone know a solution for how to get the mobile version to automatically resize so that it looks like the text and image are supposed to be together 

---

I'm currently experiencing the exact same thing.

[PageFly-Victor]

Hi @ Tinyotters

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code 

-Asset-> section-banner-image.css  paste the below code at the bottom of the file.

@media(max-width:767px){

h2.banner__heading.h1{margin-top:0 !important}

.banner__content.banner__content--bottom-center.page-width{

position:absolute !important;

inset: 0 !important

}

}

Hope my solution works perfectly for you! 

Best regards,

PageFly

[tinyotters]

I...actually think this worked, but what it exposed was the positioning of the text on my background was wrong.  So, I'm going to give this a thumbs up and return as soon as I can fix the text on the background and test to make sure it's ok.

[tinyotters]

I...actually think this worked, but what it exposed was the positioning of the text on my background was wrong. So, I'm going to give this a thumbs up and return as soon as I can fix the text on the background and test to make sure it's ok.  Thank you so much!

[PageFly-Victor]

if the text is longer I will give you a different code. you can change the text and give me feedback