Main Content + Sidebar in iPad portrait view.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #6301
    Paula
    Guest

    Hi Ron

    Is it possible to display sidebar next to main content in iPad portrait view? Thanks much.

    Paula

    #6302
    Ron
    Keymaster
    #6303
    Paula
    Guest

    Thanks for reply Ron.

    I really don’t want to disable responsive layout on mobile view. Is it possible to disable responsive layout ONLY on tablet view?

    #6304
    Ron
    Keymaster

    Try this CSS code:

    @media screen and (max-width:840px){
       #container #main #content {width: 65%;}
       #container #main .sidebar {width: 35%;}
    }
    
    @media screen and (max-width:480px){
       #container #main #content,
       #container #main .sidebar {width: 100%;}
    }

    Replace 65% and 35% with what value you set on Frontier Options -> Layout
    You can also change the value 840px and 480px to your desired screen size for tablet and mobile.

    #6308
    Paula
    Guest

    Hi Ron

    I try CSS you provide and it works well (Main Content + Sidebar) on iPad view (768px) but it breaks mobile (360px) screen layouts.

    I’m not very good at CSS, but after tweaking almost one hour, the responsive layout for tablets and mobiles come out perfect with this CSS –

    @media screen and (width:768px){
       #container #main #content {width: 65%;}
       #main #sidebar {width: 35%!important;}
    }

    Am I doing the right way? Will that custom CSS hurt other functions and parts if I add it in child theme CSS?

    Again, always thanks to your help!

    #6309
    Ron
    Keymaster

    On my previous reply, what the example css code does is to make sure that even when the screen is 840px or smaller, the content and the sidebar are kept side by side. Then when the screen is 480px or smaller, both the content and the sidebar widths are 100% so the sidebar goes under the content.

    but it breaks mobile

    That’s really vague. It would be hard for me to guess what breaks mean without seeing your site (since you don’t give a url).

    I doubt the code on your reply above is being applied to the sidebar. There is no ID on the theme named #sidebar, unless it was edited. There is a class for both sidebars which is .sidebar and an ID for targeting individually #sidebar-right and #sidebar-left.

    #6311
    Paula
    Guest

    I found out #sidebar ID from “responsive.css”.

    I’m testing my blog on localhost right now. After transferring it to hosting, I will surely let you see it first. 🙂

    And, thank you so much for your help and Asteroid.

    #6312
    Ron
    Keymaster

    There is no #sidebar only .sidebar

    #6314
    Paula
    Guest

    I’m using latest Asteroid 1.1.9. I took screenshot on “responsive.css”. Please look at it. Thanks Ron.

    http://prntscr.com/6gegdy

    #6315
    Ron
    Keymaster

    Oh okay. All this time I thought we were talking about my other theme. My mistake.

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