Image banner is not adapting to screen on mobile view

naydeam
Visitor
3 0 0

I'm using Dawn theme and image banner size is ok in desktop view but it doesn't adapt to screen on mobile view... their sides get cropped. Can someone please help me? Thanks

Replies 2 (2)

Xipirons
Shopify Partner
136 24 29

Hi @naydeam 

 

Here are a few ways to fix the image banner cropping issue on mobile for the Shopify Dawn theme:

 

  1. Use separate mobile and desktop banner images:
  • In the Dawn theme customizer, the image banner section allows you to upload separate images for desktop and mobile.
  • Upload a mobile-optimized image that fits well on smaller screens without cropping. The recommended mobile banner size is around 800x800px.
  • This will allow you to show different banner images that are sized appropriately for each device type.
  1. Adjust the mobile banner height with CSS:
  • Go to Online Store > Themes > Actions > Edit Code
  • Open the file assets/base.css
  • Add this CSS code at the bottom:

 

@media screen and (max-width: 749px) {
.banner__media {
height: 100vw !important;
}
}

 

 This will make the mobile banner height equal to the screen width, allowing the full image to show without cropping.

  1. Use the "object-fit: cover" CSS property:
  • In the base.css file, find the ".banner__media img" selector
  • Add this line inside the selector block:

 

object-fit: cover;

 

 This tells the browser to scale the image to fill the banner container while maintaining its aspect ratio, preventing cropping.

  1. Adjust the image focal point:
  • In the Dawn theme editor, select the image banner section
  • Click on the banner image
  • Use the focal point selector tool to set the focus on the most important part of the image
  • This ensures the key part remains centered on mobile even if some cropping occurs on the sides

The best approach is to use tip #1 and upload a separate mobile-optimized banner image. But the CSS adjustments in tips #2 and #3 can also help if you want to use the same image on all devices.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Dan-From-Ryviu
Shopify Partner
7558 1460 1456

Hi @naydeam 

I recommend you create 2 separate image banner sections, one for mobile and another for desktop.

Add this code to Custom CSS code of the section that you want to hide on the mobile.

 

@media (max-width: 749px) {
.banner {
    display: none !important;
}
}

 

Add this code to the Banner section you want to hide on the desktop.

 

@media (min-width: 768px) {
.banner {
    display: none;
}
}

 

Screenshot 2024-04-02 at 11.21.54.png

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now