Jump to content

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

Recommended Posts

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

IMG-6139.PNG

IMG-6140.PNG

Link to comment
  • Replies 6
  • Views 263
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.