Hide sidebars on mobile landscape view (Aspen)

[Kato23]

Hello,
I chose in Main Options > Mobile > Mobile support Mode: Responsive, hide sidebars

It doesn’t hide the sidebars on landscape view on mobile (iphone 4s).

In Advanced Options . Custom CSS Rules I put this code, but it doen’t work: .
aspen-mobile #sidebar_wrap_left {display:none !important;}

How do I manage to hide the sidebars also in landscape view??

Thanks in advance!

[scrambler]

The sidebar are supposed to hide when the screen gets below 640 px, it has nothing to do with the device.

If the device in Landscape is wide enough (over 640px), then is has plenty of space for the sidebar and it will be there.

We may be able to hide them at a wider screen value using custom CSS and and @media rule, but we need a link to your site to test and be sure as we not only need to hide the sidebar, but probably correct the size of content.

The rule will be something like

@media only screen and (max-width:800px) {
Rule to hide the sidebar
Rule to change content width
}

[Kato23]

Thanks Scrambler.

In landscape view de sidebars appear not next to the content but before/above the content.

This is the website: http://orangecoaching.nu/

[scrambler]

Now I am confused, You said you were using Mobile mode Responsive Hide sidebar.

If you are using Rsponsive Stack sidebars, try to add the rules below in Advanced Options > HEad Section > Custom CSS Rule box

/*restore side by side above 600px in landscape*/

@media only screen and (orientation:landscape) and (min-width:600px){
#sidebar_wrap_left {width:25% !important;}
#container_wrap {width:75% !important;}
}

If it does not work, leave the rules in and post back

[scrambler]

Your other thread mentions you want the sidebar to be 30% on tablet, so you can try changing the rules above to the ones below

@media only screen and (max-width:768px) and (min-width:581px){
#sidebar_wrap_left {width:30% !important;}
#container_wrap {width:70% !important;}
}

[Kato23]

Thank you scrambler!

You solved the sidebar-tablet problem!

The mobile issu:
I agree responsive hide sidebar is confusing. I’m sure I’m using hide sidebar. When I keep mobile straight there are no sidebars, when I keep the mobile landscape, the sidebars appear under the menu, but before the content. Your above rule: /*restore side by side above 600px in landscape*/     doesn’t work unfortunally.

More suggestions?

[scrambler]

I am confused by your conflicting statements
“You solved the sidebar-tablet problem!”
“Your above rule: /*restore side by side above 600px in landscape*/     doesn’t work unfortunatelly.”

That being said, It looks like Aspen is doing stuff I did not know on mobile.

Try and change the rule I gave you to

@media only screen and (max-width:768px) and (min-width:581px) and (orientation:landscape) {
.aspen-mobile-resp-nostack #sidebar_wrap_left {width:30% !important;display:block !important;}
.aspen-mobile-resp-nostack #container_wrap {width:70% !important;}
}

[Kato23]

Sorry for the conflicting statements. I made a mistake there. However the tablet issue is solved and I’m very happy with that.

However the mobile issue still doesn’t work. On landscape mobile screen the sidebars still appear.

Any other suggestions?

[scrambler]

Still confused 🙂

Mobile means tablet and phones. So you really need to clarify what you are looking for on tablet Portrait and landscape and phone portrait and landscape

[Kato23]

Thank you Scrambler for your effort
OK. On tablet you can still see the left sidebars as well on portrait and landscape. I’m very happy with that, don’t want to change that.

On phone I don’t want sidebars. At the moment there are no sidebars on portrait view. Thats OK.
On landscape view you see the sidebars below menu and before content (like stacked sidebars). Not OK. I want them just like the portrait view: no sidebars/hide sidebars.

If you watch it on your smartphone you will see what I meen.

[scrambler]

What you need to realize is that there is no way to differentiate between a tablet and a phone. The only thing we can do is differentiate on is the width of the screen.

So if a phone in landscape has the same size as a tablet, they will behave the same. It does make sense, as if the layout looks good on a specific resolution, it should not matter if the device is a phone or a tablet. What matters is that the screen is big enough for the layout.

That being said you may be able to find a sweet spot by adjusting the min width value in the rule I gave you. I had it set to 581 wich is normally the threshold for a phone in portrait, but you may be able to increase that to exclude the phone in landscape. The risk is that when the sidebar disappear for the phone in landscape, they may also disappear for the tablet in portrait.

Test various value (increase progressively and see what happens

@media only screen and (max-width:768px) and (min-width:600px) and (orientation:landscape) {
.aspen-mobile-resp-nostack #sidebar_wrap_left {width:30% !important;display:block !important;}
.aspen-mobile-resp-nostack #container_wrap {width:70% !important;}
}

[Kato23]

Thank you. I tried different values on min-width like 600, 650, 700, 750. They didn’t had any effect unfortunaly.

[scrambler]

I think We need to combine two rules. Try

@media only screen and (max-width:768px) and (min-width:641px) and (orientation:landscape) {
.aspen-mobile-resp-nostack #sidebar_wrap_left {width:30% !important;display:block !important;}
.aspen-mobile-resp-nostack #container_wrap {width:70% !important;}
}

@media only screen and (max-width:640px)  and (orientation:landscape) {
.aspen-mobile-resp-nostack #sidebar_wrap_left {display:none !important;}
.aspen-mobile-resp-nostack #container_wrap {width:100% !important;}
}

[Kato23]

Yes! Thank you so much!!!!

[Author]

Posts