Web banner on mobile getting cut off

graficus
Tourist
3 0 0

Hi! 

Can someone please help me with mobile optimization? I want my banner images to look the same on mobile as on desktop. It's fine with most photographs, but I created a custom banner that contains both images and text. The text gets cut off on the mobile view. My URL is https://www.rusticbarnboutique.com and I'm using the Impulse theme. Specifically, I'm referring to the first banner in the slideshow (the tiny tikes image).

Can anyone help with this issue? Thank you.🙂🙂

-Kelly

Replies 3 (3)

Hardik29418
Shopify Partner
2858 407 1073

Please place this code at the end of theme.scss

.hero__image {
    -o-object-fit: contain;
    object-fit: contain;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
graficus
Tourist
3 0 0

Hello,

If I use the code you provided, then my desktop slideshow and mobile images do not fill the area. Is there a way to fix this?

graficus_0-1618065448482.png

graficus_1-1618065488535.png

 

 

Hardik29418
Shopify Partner
2858 407 1073

What is happening here is that you are using landscape and portrait images which are not fitting in the provided height. Please use landscape images which fit in the provided area.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email