[Resolved] Hide left sidebar on tablet landscape view

[John]

Hi,

On tablet the menu toggle is displayed when looking in portrait view. When you flip the tablet over to landscape the toggle is replaced by a sidebar with menu. (On desktop i have a vertical menu into the sidebar) I would like to have a similar behavior on tablet i.e. menu toggle both in portrait and landscape view. and maintain the sidebar menu on desktop. I tried this CSS

@media (min-width: 769px) and (max-width: 1024px) {
#left-sidebar {
display: none;
}
}

That did not work out. Should i use different break points ?

Thanks,
John

[David]

Hi there,

table landscape media queries can be a bit hit and miss but you can try this one:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

[John]

Hi David;

I did not work out, below i copied all the associated CSS i have, maybe some conflict with eachother ?

@media (min-width:769px) {
.menu-item-has-children .dropdown-menu-toggle {
font-size: 26px;
}
}

@media (max-width: 768px) {
.menu-item-has-children .dropdown-menu-toggle {
font-size: 24px;
}
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#left-sidebar {
display: none;
}
}

[David]

They can be tricky little rascals. Try this with the pixel ratio defined:

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1) {
    #left-sidebar {
        display: none;
    }
}

[John]

Hi David,

Tricky they are, the sidebar is still there.

John

[Tom]

Hi there,

Is that code not hiding the sidebar at all?

[John]

No, soory.

I have installed it on my testsite, with some elementor nav widgets.
You can check it here:https://mijntestdomain.masbernadis.eu/blog/

This is all the CSS added:
.site-header {
display: none;
}
h1.entry-title {
display: none;
}
.separate-containers .site-main, .entry-content {
margin-top: 0px;
}
.separate-containers .inside-article {
padding-top: 0px;
}

@media (min-width:769px) {
.menu-item-has-children .dropdown-menu-toggle {
font-size: 26px;
}
}

@media (max-width: 768px) {
.menu-item-has-children .dropdown-menu-toggle {
font-size: 24px;
}
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
#left-sidebar {
display: none!important;
}
}
._2p3a{
width:100%!important;
}

[Tom]

Try this instead:

@media (max-width: 1024px) {
    #left-sidebar {
        display: none;
    }

    .content-area {
        float: none;
        width: 100%;
        left: 0;
    }
}

[John]

Yes, that works out perfectly.

Thanks Tom

[Tom]

You’re welcome 🙂

[Author]

Posts