When should I use media queries?
Hi, my website has these kind of squares with different stuff inside like a chatbot. Are there ways to make them responsive just with grid and flexbox? I usually style websites and then always use media queries but they are max 6 or 7.
15 Replies
You could easily use things like
max-width or min-width to avoid media queries all together. If you're using grid things like minmax() or flexbox's flex-grow and flex-shrink. Heck, setting the default font size with the clamp() function lets your font size fluidly modify itself based on the viewport (up to a point) without any media queries at all!
Of course, sometimes you need media queries. For example, if you have a sidebar that's hidden on small screen sizes (as seen on MDN and many others) you can't just use min/max width or minmax. You're modifying things like display and it's location on-screen.do you have any good yt videos to recommend about this?
Not a YT video, but Kevin's free responsive course:
https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
Also not a YT video, but a (paid) book/awesome site by some of the best in the business about intrinsic layouts:
https://every-layout.dev/
i will look into it but i dont have 21 days. I wanted something to apply in my case right away instead of the usual media queries to learn something new
If you have a specific question you could just ask 😜 What specific bit of your current project are you wanting to apply fluid layout to?
Though, I guess to answer your question:
Use media queries when setting fluid values (min/max width, clamp, minmax, etc) don’t work. Any time you need to modify more than just the size of an element
For example, in my codepen on your other question I used this bit of CSS:
The important bits are the last two lines. The
inline-size (a logical property version of width for English language) is set to the smaller of 75ch or 4em less than full-width. This guarantees that there is at least 4em of free space. The margin-inline (again, a logical property version of margin-left and margin-right) of auto evenly distributes any free space around the element, thus centering it. This means that the .main-container will have 2em (even distribution of 4em) of margin at least on all screen sizes, but won't get any bigger than 75ch.
ch being the "character" size (or the width of the number 0 in the current font). Layout maxims say that a good line length is between ~45 and ~90 characters per line (anything longer and it's too easy for our eyes to get lost and not make it back to the next line), defaulting to 60 when in doubt. I went a bit wider for the chat box because it contains two different chat bubbles and each individual is also limited in size.Also, a wonderful (and wonderfully-underrated!) YT video that Kevin did two years ago using grid to create one of the coolest layouts I've seen in a while!
https://www.youtube.com/watch?v=c13gpBrnGEw
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and ...
-# You'll see he also uses
ch! Best CSS unit ever IMO :pI think I need to go back to mastering Grid and flexbox and then follow a good guide like you sent. Because I can't really follow what you are saying to me
in my own project i have nav bar with a logo and search bar. The search bar open just a div with results
then I have two squares in the home page, the chat and also the selected results from the search
Is it completely wrong to use media queries in such simple containers?
i think that those kind of designs mixing grids and flexbox are more for very complex websites
The code snippet has nothing to do with flexbox or grid, it's about CSS units. It's about giving the browser suggestions and letting it take care of the minutia. There's also a bit of typography theory, too (with the "good line length"). You can use the code snippet without the flexbox and it'll work just fine.
It's not about "simple" or "complex". It's about intent. Use media queries for non-numerical changes. If it's just changing a number (width, offset, font size, etc) use
max(), min(), clamp(), calc() or any of the other various ways to set a range once and don't worry about it. Media queries should only be needed for things that change non-numeric properties.
-# I have to head out to work now so I won't be able to reply much for the next 10hr or sowhat if i need to resize everything inside a container? so the buttons and other divs? is that a case for media queries?
That’s still just a numeric change, so you can (and I would say should) use a CSS function.
I like the
clamp function for many such things. It takes three parameters: clamp(min, formula, max).
It evaluates the formula. If the formula value is less than the minimum it uses the min value. If the formula is greater than the max then it uses the max. Otherwise it uses the value of the formula.
This will set the button to be 10% of the parent container’s width, but no less than 2em and no greater than 4em.i will loo into this, thanks
Probably the three most useful calculation functions for this:
* Clamp: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp
* Max: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/max
* Min: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/min
Kevin made a video about it