[Solved] Swapping the locations of two divs in a media query - CSS-Tricks

This topic is empty.

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

1 2 →

Author

Posts
August 20, 2015 at 11:30 am #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

<div id="sidebar">STUFF</div> <div id="left">STUFF</div>

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!

August 20, 2015 at 11:41 am #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;
}
```
August 20, 2015 at 11:44 am #206792

xebico
Participant

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

August 20, 2015 at 11:55 am #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!!!

August 20, 2015 at 12:01 pm #206795

shaneisme
Participant

Bringing it all home:

http://codepen.io/drainpip/pen/vOqepg

August 20, 2015 at 12:07 pm #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:
```

<div id="sidebar">
SIDEBAR STUFF
</div>


<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….
August 20, 2015 at 12:10 pm #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. :)

August 20, 2015 at 12:25 pm #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!

August 20, 2015 at 1:18 pm #206801

shaneisme
Participant

NP – have fun out there :)

August 20, 2015 at 11:29 pm #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

August 21, 2015 at 7:06 am #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.

August 21, 2015 at 7:07 am #206844

xebico
Participant

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

August 21, 2015 at 7:15 am #206846

Paulie_D
Member

You’re gonna love flexbox then….

August 21, 2015 at 7:20 am #206849

xebico
Participant

Ooooooooh.

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

August 21, 2015 at 7:35 am #206853

shaneisme
Participant

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

Posts

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

1 2 →

The forum ‘CSS’ is closed to new topics and replies.