How to avoid cropping on mobile version image banners?

Shopify Discussion
1

Hello,

I’m trying to insert an image for the mobile version of the site. However, this image does not fit the height requirements. Does anybody have a code to make sure that the images are imported without being cropped to a certain size?

Shop link is: https://kwxg8vjan7mvzkzn-62119084228.shopifypreview.com.

Greetings,

Mel

2

Hi @mel999

It’s PageFly - Page Builder App here, I hope you are doing well today!

Regarding the issue with banner image on desktop view, please kindly follow my instruction here:

  1. From Shopify dashboard, go to Online store > Themes > Edit code

  2. In the search box, search for the file named base.css

  3. Scroll to the very end of this file, and paste this code:

@media screen and (max-width: 767px){
div#Banner-template--15650456535236__image_banner {
height: 45vw;
}
}
  1. Save the change and reload your store to check

Let me know if this work for you. Have a nice day ahead!

3

Hello PageFly,

Thank you first and foremost for your answer and help. For the homepage banner this works perfectly. However, I need the 1st, 2nd and 3rd picture to be imported as their true size. Because right now a portion is cut off. Would you know how to code this? Thank you in advance.