What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Seperate mobile and desktop banner Dawn theme

Solved

Seperate mobile and desktop banner Dawn theme

JackHampel
Tourist
6 0 2

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

Accepted Solution (1)
theycallmemakka
Shopify Partner
1746 425 443

This is an accepted solution.

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 </body> tag

 

<style>
@media screen and (max-width: 749px){
  #shopify-section-template--20092381397327__4e8f1253-d79c-4c20-873a-3a676d5b44dd .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 69rem;
}  
}

</style>

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

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 8 (8)

Spac-es
Shopify Partner
401 118 152

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!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
JackHampel
Tourist
6 0 2

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?

theycallmemakka
Shopify Partner
1746 425 443

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

JackHampel
Tourist
6 0 2

https://jacks-praesente.de/

 

this one

 

pw is "Maserati" 

theycallmemakka
Shopify Partner
1746 425 443

This is an accepted solution.

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 </body> tag

 

<style>
@media screen and (max-width: 749px){
  #shopify-section-template--20092381397327__4e8f1253-d79c-4c20-873a-3a676d5b44dd .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 69rem;
}  
}

</style>

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

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

JackHampel
Tourist
6 0 2

It worked!!! Thank you very much!

CyberdyneJoule
Excursionist
16 0 4

where to put this code ? base.css ?

CyberdyneJoule
Excursionist
16 0 4

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