Image banner is not adapting to screen on mobile view

Shopify Discussion
2

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.