How to make second banner not visible on mobile version

[IraKarpova]

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/

[ThePrimeWeb · 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>

[IraKarpova]

Thank you! It works perfect!!