Home Forums Archived Forums Mobile View Hide sidebars on mobile landscape view (Aspen)

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #17640
    Kato23
    Participant

    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!

    #21443
    scrambler
    Moderator

    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
    }

    #21444
    Kato23
    Participant

    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/

    #21445
    scrambler
    Moderator

    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

    #21446
    scrambler
    Moderator

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

    #21447
    Kato23
    Participant

    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?

    #21448
    scrambler
    Moderator

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

    #21449
    Kato23
    Participant

    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?

    #21450
    scrambler
    Moderator

    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

    #21451
    Kato23
    Participant

    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.

    #21452
    scrambler
    Moderator

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

    #21453
    Kato23
    Participant

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

    #21454
    scrambler
    Moderator

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

    #21455
    Kato23
    Participant

    Yes! Thank you so much!!!!

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘ Mobile View’ is closed to new topics and replies.