Image banner is not adapting to screen on mobile view

[naydeam]

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

[Xipirons]

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.

[Dan-From-Ryviu]

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;
}
}