Make Responsive CSS
For using grids, try using flex containers.
First, we need to initialize the viewport. This enables us to determine screen sizes in our CSS. In the <head> section of the website add the following code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then, In the .css file add the appropriate CSS for your scenario..
- This applies to screen sizes <= 900px.
@media only screen and (max-width: 900px) {
...
}
- This applies to screens >= 900px.
@media only screen and (min-width: 900px) {
...
}
- This applies to screens between 400px and 500pxIn the
<head>section of the website:
@media only screen and (min-width: 400px) and (max-width: 500px) {
...
}
Notes mentioning this note
There are no notes linking to this note.
Leave a Comment