- This topic is empty.
-
AuthorPosts
-
August 20, 2015 at 11:30 am #206789
xebico
ParticipantOK, 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 #206791shaneisme
ParticipantYou 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 a799px
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 #206792xebico
ParticipantThat’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 #206794shaneisme
ParticipantI’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 theright: 25%
stuff… then that becomes re-usable…CSS!!!
August 20, 2015 at 12:01 pm #206795shaneisme
ParticipantBringing it all home:
August 20, 2015 at 12:07 pm #206796xebico
ParticipantDrat. 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….
August 20, 2015 at 12:10 pm #206797xebico
ParticipantI 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 #206799xebico
ParticipantIt 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 #206801shaneisme
ParticipantNP – have fun out there :)
August 20, 2015 at 11:29 pm #206820Shikkediel
ParticipantNeat, I was just wondering @shaneisme if there’s a particular reason (I’m not seeing) to use
auto
on the opposite side?August 21, 2015 at 7:06 am #206843shaneisme
ParticipantIf 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 #206844xebico
ParticipantSpeaking 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 #206846Paulie_D
MemberYou’re gonna love
flexbox
then….August 21, 2015 at 7:20 am #206849xebico
ParticipantOoooooooh.
(But still no balanced, newspaper-style columns?)
August 21, 2015 at 7:35 am #206853shaneisme
ParticipantAnd if you like flexbox, wait until you get a hold of CSS Grid… ;)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.