Make image banner two different sizes, one for mobile and another one for desktop on Dawn Theme

Store Design
1

I use a banner image on my homepage that’s 3128 × 4392 and have it set as “adapt to first image” and it seems to look great on mobile phone, but on desktop it looks very big and takes a while to scroll through it, same with the slideshow that i have in the same homepage when you scroll lower, they look enormous on desktop, is there any option to set an image with different size for mobile and desktop, since my website looks better on mobile than desktop, so they both look decent?

web: www.storeolympia.com

2

Hello!

Do you mind me asking which theme you are using?

For a simple solution, you can add this custom CSS and just change the number you see fit.

@media screen and (max-width: 500px) {
  div#Banner-template--20031017386316__image_banner {
      max-height: 575px;
  }
}

The above code will limit the height of that section on devices with a width greater than 500 to the “max-height” number you specify.

To add this code, you can go to Customize theme > Theme Settings (left-hand side) > Custom CSS

3

Hi @itsfrizzy
You can add different image for desktop and mobile and then add customize code to make image for desktop appear in desktop only and image for mobile display on mobile only