Seperate mobile and desktop banner Dawn theme

Store Design
1

Hello everyone,

I would like to have separate banners for mobile and desktop. I’ve managed to code it, but the mobile image is being cut, which is not what I want. I’d like it to occupy the full height of the display. Could you please help me with this?

Thank you!

my code:

.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}

@media screen and (max-width: 749px) {
.banner__media:first-child {
width: 100%;
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}

2

This code will make sure that on screens smaller than 750 pixels wide, the banner image will take the full height of the viewport without getting cut off and will maintain its aspect ratio using:

.banner__media {
  width: 100%;
  height: auto; /* Set height to auto to maintain aspect ratio */
}

@media screen and (max-width: 749px) {
  .banner__media {
    width: 100%;
    height: 100vh; /* Set height to full viewport height */
    object-fit: cover; /* Maintain aspect ratio without cropping */
  }
}

I hope it helped you!

3

Thanks for the quick reply! Unfortunately, it didn’t quite do the trick, and now the first desktop image has disappeared. Any chance you could help me out with this?

4

Can you provide link to the page that has the issue? I will look onto the issue and provide solution accoringly

5

https://jacks-praesente.de/

this one

pw is “Maserati”

6

Hi @JackHampel ,

Please try adding below codes to and see if this works ?

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

2 Likes
7

It worked!!! Thank you very much!

1 Like
8

where to put this code ? base.css ?

9

Tried. This code works but requires two images to be loaded in image banner. This leads to deteriorated image quality.

https://www.youtube.com/watch?v=zUnVUOEKFSA by websensepro is better and simple and no issue of image quality deterioration (my opinion)…Thanks websensepro