My image banner displays correctly on mobile but crops on desktop. How can I make it appear full size on desktop? Or at least not crop the information on the image.
Thank you!
I just realized it varies on different computer screen sizes. I have two screen and it crops on one but its full size on the other one. How to fix this so it ajust to the screen?
This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-image-banner.css->paste below code at the bottom of the file
@media screen and (min-width: 750px){
.banner__media > img {
object-fit: fill !important;
}
div#Banner-template--17698535768339__image_banner {
height: 500px;
}
}
Hope my answer will help you.
Kate from PageFly Team
you can increase the height value to match the height of the image, example: height: 650px, the image will not be stretched horizontally too much
Ok thank you!
It works but doesn’t give a good result. I don’t know if you could help me with another method.
I would like to try using 2 different images for desktop and mobile. I tried this https://www.mojoin.com/show-shopify-banner-image/ but it doesn’t work. When they say “add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the Assets directory.”.
These file name don’t exist. I don’t know where to put it. I tried in theme.liquid and theme-editor.js and none of it works. The images don’t appear. (and yes and added them in the new section in customize theme).
That is absolutely a good idea. If you follow the instructions, you can add the code to the base.css file
I tried to add it in base.css or global.js and it’s not working on either.
I think you can wrap it in tag an put in right above closing tag in theme.liquid