Archived topic
Hide left sidebar on tablet landscape view
9 replies · Started by John on December 24, 2018
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
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 */}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;
}
}
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;
}
}Hi David,
Tricky they are, the sidebar is still there.
John
Hi there,
Is that code not hiding the sidebar at all?
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;
}
Try this instead:
@media (max-width: 1024px) {
#left-sidebar {
display: none;
}
.content-area {
float: none;
width: 100%;
left: 0;
}
}Yes, that works out perfectly.
Thanks Tom
You're welcome :)
