Hidden Desktop Gallery & Mobile Gallery Banner Showing on Mobile Landscape View

Hi, 

On my site, I've created separate galleries as banners for mobile and desktop view. I've hidden the mobile banner gallery on desktop and vice versa successfully using CSS, however when the orientation of the mobile view is turned to landscape, both galleries show, with the mobile view being cut off. I was hoping to either prevent landscape orientation entirely on the front page of the site in mobile view, or hide completely the desktop view from being viewed in landscape orientation. 

Thanks so much in advance!

Zach

Hi. What is site url? We can check easier

On 2/3/2022 at 9:26 PM, tuanphan said:

Hi. What is site url? We can check easier

Hi Tuanphan, 

The site url is www.sethtremblayphotography.com

I appreciate your help! Thanks so much, 

Zach

On 2/6/2022 at 2:53 AM, zacht said:

Hi Tuanphan, 

The site url is www.sethtremblayphotography.com

I appreciate your help! Thanks so much, 

Zach

What is password?

5 hours ago, tuanphan said:

What is password?

Terribly sorry for not providing that. It is g8ZM&]x

On 2/9/2022 at 1:34 AM, zacht said:

Terribly sorry for not providing that. It is g8ZM&]x

Don't remove any code in your current code

Add this to Design > Custom CSS

@media screen and (max-width: 767px) and (orientation:landscape) {
    section#banner-gallery {
        display:none !important;
    }
    section#gallery-mobile {
        height:80vh
    }

    section#gallery-mobile img {
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important
    }
}

On 2/13/2022 at 9:03 AM, tuanphan said:

Don't remove any code in your current code

Add this to Design > Custom CSS

@media screen and (max-width: 767px) and (orientation:landscape) {
    section#banner-gallery {
        display:none !important;
    }
    section#gallery-mobile {
        height:80vh
    }

    section#gallery-mobile img {
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important
    }
}

 

Hi Tuanphan, 

Thank you so much for the help. That worked great and your advice on these forums has been invaluable through this process. Have a great day.