Solved

How to make second banner not visible on mobile version

IraKarpova
New Member
12 0 0

Hello!

Hope you can help me! 

I wanted to make my mobile version customised and more comfortable for use, and add several codes. First one to make full screen image:

<style>
.banner {
height: 100vh; // vh mean viewport height and will fit to every screen
}
</style>

 

and second one, to make first banner full screen and second banner not full screen but normal (only on mobile version):

<style> @media only screen and (max-width: 768px) { #shopify-section-template--17095807926499__image_banner .banner { height: 100vh !important; } } @media only screen and (min-width: 769px) { .banner { height: 100vh; } } </style>

 

But now I found out the design is still not good and look messy, the reason is in second banner, it's not good for mobile version in general. 

The question is, can I make second banner not visible on mobile version, but stay it on laptop version with full screen for both 1 and 2 banners.

 

Thank you!!

My website is: https://www.karpovastudio.com/

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1077 282 218

This is an accepted solution.

Hey @IraKarpova,

 

Remove the old code I gave you and replace it with this

<style>
@media only screen and (max-width: 768px) {
    #shopify-section-template--17095807926499__image_banner_8JCiE4 .banner {
        display: none !important;
    }   
 
    #shopify-section-template--17095807926499__image_banner .banner {
        height: 100vh !important;
    }    
}

@media only screen and (min-width: 769px) {
    .banner {
        height: 100vh;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
1077 282 218

This is an accepted solution.

Hey @IraKarpova,

 

Remove the old code I gave you and replace it with this

<style>
@media only screen and (max-width: 768px) {
    #shopify-section-template--17095807926499__image_banner_8JCiE4 .banner {
        display: none !important;
    }   
 
    #shopify-section-template--17095807926499__image_banner .banner {
        height: 100vh !important;
    }    
}

@media only screen and (min-width: 769px) {
    .banner {
        height: 100vh;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
IraKarpova
New Member
12 0 0

Thank you! It works perfect!!