@joshdail
Posted
Here are a few things I've found helpful:
Try to avoid setting definite widths when you can. I will usually set a width of 100% and then a max-width, like this:
.section-menu {
width: 100%;
max-width: 22em;
}
That way, the element won't go wider than what you want, but it can also shrink with the page.
Also, if you're using Flexbox for your main page sections, then when the width goes down, you can switch the flex-direction from row to column and make any other changes in the flex layout. So for example here, when the width drops, the sections shift from being in a row to stacking on top of one another, being centered, and being the same width:
@media (width < 900px) and (orientation: portrait) {
.container {
flex-direction: column;
align-items: center;
padding-inline: 2em;
}
.section-menu,
.section-meter {
max-width: 22em;
}
}
I had to write a lot of media queries for this project. What I found helpful was using the Chrome and Firefox dev tools, and trying out different screen sizes to see where the components started to break. Then I would write a media query to fix the problem. So I have one @media (width < 900px) with some rules, then another @media (width < 420px) with more rules, and so on. Just a lot of trial and error and experimenting until it looks the way you want it to.
