Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Why Stack Overflow recommends it
Stack Overflow users link it when answering responsive-layout questions and a newcomer needs a quick, practical introduction to @media rules.
Recommended by 5 people across 5 different months, 2017 to 2025.
What it is
A 4.5-minute beginner tutorial by Kevin Powell explaining what CSS media queries are and how to write them. It shows how to assign new CSS rules at specific screen sizes and points to MDN and CSS-Tricks for further reading.
What people said
Recommends giovannipds · 2017-10 · Stack Overflow · on “Center children if they don't fit the parent”
You're probably wanting to learn media queries, to respond to the user's screen. Am I right? If it's that, take a look here: [LINK] This is what you want to learn: @media (max-width: 1500px) { .mainpage-articles { text-align: center; } } This code align text things to the center when the user window's is at max 1500px, above that it doesn't. There are many ways to apply media queries. I recommend you to watch this [this video] to learn it a little better. Full code of the example above: <style> .mainpage-articles { background-color: #eee; float: left; width: 60%; } .mainpage-article { background-color: cyan; width: calc(800px + 8%); margin-left: auto; margin-right: auto; } .mainpage-article .thum
Recommends Mr Nellinger · 2017-10 · Stack Overflow · on “How to change html component posstion when switching from Mobile view to Web view”
It really depends on what you are using for your frontend dev. When I do web applications I love to use bootstrap. It gives me a bunch of css classes out of the box that help me create a responsive frontend that will do what I need it to on any screen size. Long story short, I would use media queries, the bootstrap layout grid, or a combination of both. There are many tutorials on youtube. This guy shows how the basics work for the bootstrap layout grid. [LINK] Media queries are useful when you need your UI to do something different based on the current device screen size. This can be used without the need for bootstrap, but can also be used with bootstrap to make really responsive apps. The
Recommends Mr Nellinger · 2017-11 · Stack Overflow · on “Responsive React App via CSS”
I recommend looking into Media Queries. Here [this video] is a short video to show you the basics. You can set a threshold that will trigger separate styles under those conditions. It can be very useful when you want your UI to do something different at different sizes. @media only screen and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) { //css goes here with whatever css you want to fire at this threshold }
Recommends Mr Nellinger · 2017-11 · Stack Overflow · on “Text is Hidden When Window Resizes”
When I do web applications I love to use bootstrap. It gives me a bunch of css classes out of the box that help me create a responsive frontend that will do what I need it to on any screen size. Long story short, I would use media queries, the bootstrap layout grid, or a combination of both. There are many tutorials on youtube. This guy shows how the basics work for the bootstrap layout grid. [LINK] Media queries are useful when you need your UI to do something different based on the current device screen size. This can be used without the need for bootstrap, but can also be used with bootstrap to make really responsive apps. There are also countless tutorials on youtube for that also, but h
Recommends Mr Nellinger · 2017-11 · Stack Overflow · on “How to changing layout based on screen size with react”
I recommend looking into Media Queries. Here [this video] is a short video to show you the basics. You can set a threshold that will trigger separate styles under those conditions. It can be very useful when you want your UI to do something different at different sizes. @media only screen and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) { //css goes here with whatever css you want to fire at this threshold }
Recommends AppDreamer · 2018-07 · Stack Overflow · on “Angular6 - How to vary .css class width based on mobile vs. browser”
Thanks for this! I was able to find a super video that helped me understand better... [this video] However, you may want to edit your answer... either change your "min-width" to "max-width" or, as I did, keep the media query with min-width and change the value in my .video to width:100vw, and change the value in your suggestion to width:45vw for it to work right. This is a different way of approaching things - and probably better, but I will need to think through the framework... thanks for showing me a different way!
Recommends Adam · 2023-01 · Stack Overflow · on “Make image and text responsive”
As tacoshy says in the comments, a media query is the easiest way to do this. You have a lot of css in there that looks unnecessary too that could probably do with a clean up. I've removed some css and replaced it with code that makes it behave okay at small screen sizes but tbh you could eliminate a lot of what you've written to get the same effect. If what I've written isn't clear or you have any questions just drop a comment below and I'll explain. Info on media queries on w3schools here [LINK] A good guide to flexbox on css tricks [LINK] A good intro to flexbox from Kevin Powell here [LINK] and a tutorial on youtube here [this video] div.content { /*width: 100vw; removed this as it was causin
Recommends Snibesto · 2025-02 · Stack Overflow · on “CSS/JS Website working perfectly fine on desktop but not working correctly on mobile”
It is because your website is not responsible. You should use display: flex as much as you can because it moves elements to next line when the websites width gets smaller. As well as using media queries, it basically applies wanted changes when the websites width (viewport) shrinks video on media queries: [this video] video on flexbox (really good) [LINK]
Cites scbrading · 2018-07 · Stack Overflow · on “Lock responsive image at the same position while resizing browser”
Stablize your code by removing the <br> tags and using css styles, instead, to create spacing. Looking at your code, I'm seeing that you're using a lot of <br> tags to create vertical space between some of your elements. This is not good practice. Instead, you should add padding to your <div> elements, or margin to your <p> elements to create those separations. By removing the <br> tags, you make your html easier to read and it will be easier to predict what the browser will do with your other elements. For responsive design, try media queries with the new grid layout If you want to create a responsive design, I'd suggest checking out the new grid layout system [LINK] and media queries [VIDE
Cites TJBlackman · 2018-08 · Stack Overflow · on “Keeping the overlay text fixed [html]”
Yes. You can set css normally, but then use a media query to say "If the browser is this wide or smaller, use this CSS instead". It looks like this: `@media (max-width: 768px){ .div { color: red; } }` [this video]