Skip to main content

Forums

This topic contains 15 replies, has 4 voices, and was last updated by  Shikkediel 4 years ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #206789

    xebico
    Participant

    OK, I’m out of ideas and I hope I can explain this clearly.

    I have a relatively simple site: A left-hand sidebar (25%) and a main section (75%). Each is a

    <

    div> and floated left. No problem there, it scales nicely on different screen sizes.

    The two sections will vary in length depending on the latest content. (It’s a self-hosted WordPress site.)

    I use media queries to change the width of those sections (among other things), so that on a tiny phone screen both divs are 100% wide, and thus stacked on top of each other.

    @media all and (max-width: 799px) {
    html {font-size: 14px; width:100%;}
    #left { width: 100%; !important}
    #sidebar { width: 100%; !important}
    }

    The page itself is darned simple: There’s a top div with the logo and such, and then essentially

    &lt;div id="sidebar"&gt;STUFF&lt;/div&gt;
    &lt;div id="left"&gt;STUFF&lt;/div&gt;

    It works perfectly. But here’s the problem: The Boss wants the main section to be on top when seen on a mobile screen. But because the sidebar comes first in the HTML (so it’s on the left for larger monitors), it stacks on top of the main section.

    I want to keep that sidebar to the left, but when max-width is 799 or less I want it to go under the main section.

    Is there any way to swap the positions of the sidebar and main section when on a small screen, so the sidebar renders underneath?

    I feel like it’s a simple solution, but I’m just not coming up with it. Thanks for any help!

    #206791

    shaneisme
    Participant

    You sure can!

    1) Move the markup of the main content above the sidebar in your markup (so that on your mobile view it’s stacked up correctly)
    2) You should actually reverse your thinking on your media query. Make the mobile view your default, and change it when it gets above a 799px with floats, etc. That way you can add the following (inside your new 799px and up query):

    #sidebar {
      /* your current styles here */
      right: 75%;
      left: auto;
    }
    #left {
      /* your current styles here */
      left: 25%;
      right: auto;
    }
    
    #206792

    xebico
    Participant

    That’s… that’s brilliant. Now to find out if it works (and if I understood it correctly.) Thank you!

    #206794

    shaneisme
    Participant

    I’d also recommend two more things – don’t use ID’s as your selector. ID’s are super specific, and even if they’re for super specific things you’ll find yourself fighting them at some point in the future.

    Also, you could do something more semantic with the names too. If the page was going to maintain its simplicity using classes like .sidebar and .main-content (or whatever) might be better.

    If you plan on making things a bit more complicated in the future, you might want to split the layout from the content even more.

    You could do .sidebar, but also include its column definition with .column-1-4 for one quarter… that way you could re-use the column stuff elsewhere. Then you could also add yet another class called .push-column-3-4 for the right: 25% stuff… then that becomes re-usable…

    CSS!!!

    #206795

    shaneisme
    Participant

    Bringing it all home:

    #206796

    xebico
    Participant

    Drat. Didn’t work and I can’t explain why. I’m guessing I’m not understanding your instructions well enough.

    In the HTML file I have something similar to this:

    <!-- SIDEBAR ----------------- -->
    <div id="sidebar">
    SIDEBAR STUFF
    </div>
    
    <!-- MAIN -------------------- -->
    <div id="left">
    MAIN BAR STUFF
    </div>
    

    My CURRENT stylesheet’s media queries (again, simplified for here):

    @media all and (min-width: 800px) {
         body {width: 100%;}
         html {font-size: 15px;}
         #sidebar {width: 25% !important;}
         #left {width: 75% !important;}
    }
    
    @media all and (max-width: 799px) {
         body {width: 100%;}
         html {font-size: 14px; width:100%;}
         #left { width: 100%; }
         #sidebar {width: 100% !important;}
    }
    
    

    You’re suggesting I swap the sidebar and mainbar in my HTML and change the media queries to

    @media all and (min-width: 800px) {
         body {width: 100%;}
         html {font-size: 15px;}
         #sidebar {width: 25% !important; right: 75%; left: auto; }
         #left {width: 75% !important; left: 25%; right: auto;}
    }
    
    @media all and (max-width: 799px) {
         body {width: 100%;}
         html {font-size: 14px; width:100%;}
         #left { width: 100%; }
         #sidebar {width: 100% !important;}
    }
    
    

    I’m sure I missed something there….

    #206797

    xebico
    Participant

    I saw your other notes after I posted that. I’ll need a bit to put it all together, but dagnabit, it oughta work! Thank you for your help — I’ll be back as soon as I can to tell you I figured it out. :)

    #206799

    xebico
    Participant

    It worked! Perfectly! Thank you!

    I see your point about using more semantic names (and more-reusable styles), and that’s something I’ll do in the future. Right now I’m just happy to have this work the way I wanted it, and now I can tweak it a bit.

    Again: Thank you, you saved me a TON of trouble!

    #206801

    shaneisme
    Participant

    NP – have fun out there :)

    #206820

    Shikkediel
    Participant

    Neat, I was just wondering @shaneisme if there’s a particular reason (I’m not seeing) to use auto on the opposite side?

    codepen.io/anon/pen/gpNezQ

    #206843

    shaneisme
    Participant

    If this was the only thing you were doing, yeah you don’t need it.

    If you’re making a grid system with pushes and pulls for different breakpoints, it’s a good practice so you know for sure what’s going to happen.

    #206844

    xebico
    Participant

    Speaking of which, you’ve convinced me to investigate pushes and pulls. :)
    CSS is the gift that keeps on giving!

    #206846

    Paulie_D
    Moderator

    You’re gonna love flexbox then….

    #206849

    xebico
    Participant

    Ooooooooh.

    (But still no balanced, newspaper-style columns?)

    #206853

    shaneisme
    Participant

    And if you like flexbox, wait until you get a hold of CSS Grid… ;)

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star