hello, amazing community,
I am using the publisher theme and I added an image banner in the middle of my home page
on the laptop, it looks amazing!
but on the phone, it’s not fitting to size so it’s cropped and not showing all the details
how can I make it fit on the phone size?
Thank you, in advance!
check the images below
Hi @stephanie43
Would you mind to share your store URL? Thanks1
Thanks, i see this text is in the image. This is what happen when you put the text in the image. I can suggest that this text in the image make it a content, and the content add some text and place below the banner. And make the image just image itself no text insert. Or you can check this code, but it would more smaller, in smaller screen cause the banner is design for image banner.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.media>img {
object-fit: contain;
}
.banner__media.media.scroll-trigger.animate--fade-in {
background: transparent;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you for your reply! it’s done!
