My site uses flexbox and css grid, so if you don’t know those, there’s lots of tutorials; I followed some from Wes Bos. Here, I’ll go over how I used them and other attributes for responsiveness.
Now I have a “hero image”, because I save lives, first thing on my site, with my name/summary next to it. But No! Not if you’re on a smaller screen. My name/summary magically goes above the picture. All done with CSS.
.homeSection {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap-reverse;
color: var(--clr-text-primary);
}
I set display to flex cause I’m JACKED! But the real work is in that “flex-wrap: wrap-reverse”. That makes the elements wrap in reverse order when the screen gets small and the elements need to, well, wrap. Since the first element is the picture and the second is the name/summary, the name/summary ends up above the picture.
Next is the blog section. That uses super saucy grid to layout the blog cards.
.gridContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 2rem;
}
@media (min-width: 1000px) {
.gridContainer {
grid-template-columns: repeat(3, minmax(270px, 1fr));
}
}
Grid is good for laying out elements in a grid-like fashion. Probably why they called it grid. Since I wanted a maximum of 3 columns, I used that media query to set “repeat(3, minmax(270px, 1fr)” when the screen gets wide. Otherwise, I let grid do its thing with auto-fit. The minmax(270px, 1fr) means keep the width a minimum of 270 pixels and a maximum of the entire column (when the screen gets too narrow). According to the internet, I should avoid using px units, so I might “wrap” - get it - funny callback - Ha? back around and change it to a percentage and see how that goes. If that doesn't work, I'll just “reverse” it back; HA!
The Projects section uses the same flexbox action as the hero section, using these two classes depending on if the text is to the left or right of the image link.
.wrap-me {
flex-wrap: wrap;
}
.wrap-me-reverse {
flex-wrap: wrap-reverse;
}
I made those two little classes after hearing Youtube guy advise making classes generic so you can re-use them. Guess that means I should apply wrap-me-reverse to the hero section one of these days.
A note about media queries. If you don’t know about them, here’s one I used.
@media (max-width: 600px) {
:root {
--std-max-width: 100%;
}
#heroSummary {
max-width: 100%;
}
.progressive-left-margin {
margin-top: 0rem;
margin-left: 0.5rem;
}
.progressive-right-margin {
margin-top: 1rem;
margin-left: 0.5rem;
}
section {
padding-left: 1rem;
padding-right: 1rem;
}
.wrap-me {
flex-wrap: wrap;
}
.wrap-me-reverse {
flex-wrap: wrap-reverse;
}
}
Media queries can be used to override your CSS classes depending on, in this case, when the screen is narrower than 600px. In the above query, I adjust some margins, padding and widths. I also enable those two wrap-me classes (they are not active for wider screens). I’ve heard my betters on the www say try to avoid media queries, but I’m too dumb to avoid them for now. You can apparently do a lot with min, max, minmax and clamp attributes, and I do use them, but still...too dumb.
That’s the general gist of the layout, but wait, there’s more! Next up, Super Layout!