Media Queries in CSS
Learn how to make your website responsive on desktops, tablets, and mobile phones, using media queries in CSS.
What are media queries ?
In CSS, media queries are used to apply styles on your website based on the properties of the user’s device. It helps you make your website responsive on all devices (desktops, tablets, and mobile phones).
Video Tutorial
If you prefer following a video tutorial, here you are:
We will be using a grid column. So let’s say you have a row container with 12 columns in it.
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>First, we will tell that the row will be a grid having 12 columns in total. While having each column equally sized.
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 5px;
}Media Query for Desktop
For desktop devices, you can write the following media query in CSS.
/* for desktop */
@media (min-width: 992px) {
.col {
grid-column: auto/span 1;
}
}It will check if the device width exceeds 992px, then it will divide the column into 12 parts. i.e. 12 / 1 = 12 columns
Media Query for Tablet
The following media query will be used for tablet devices.
/* for tablets */
@media (min-width: 768px) and (max-width: 991px) {
.col {
grid-column: auto/span 3; /* 12 / 3 = 4 columns for tablet */
}
}Media Queries for Mobile and Small Devices
For mobile devices, we will show 2 columns, and for small phones (having a resolution of less than 767px) we will show 1 column.
/* for mobile */
@media (max-width: 767px) {
.col {
grid-column: auto/span 6; /* 12 / 6 = 2 columns for mobile */
}
}
/* for small devices */
@media (max-width: 320px) {
.col {
grid-column: auto/span 12; /* 12 / 12 = 1 column for small devices */
}
}Bootstrap equivalent grid system
If you want a grid system like we have in Bootstrap, here it is:
/* Grid: variables */
:root{
--grid-columns: 12;
--gutter-x: 1rem; /* horizontal gutter (space between columns) */
--gutter-y: 0.5rem; /* vertical gutter (row gap) */
--container-max-width-sm: 540px;
--container-max-width-md: 720px;
--container-max-width-lg: 960px;
--container-max-width-xl: 1140px;
--container-max-width-xxl: 1320px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;
}
/* Box-sizing reset */
*, *::before, *::after { box-sizing: border-box; }
/* Containers */
.container {
width: 100%;
padding-left: calc(var(--gutter-x) * 0.5);
padding-right: calc(var(--gutter-x) * 0.5);
margin-left: auto;
margin-right: auto;
}
.container-fluid {
width: 100%;
padding-left: calc(var(--gutter-x) * 0.5);
padding-right: calc(var(--gutter-x) * 0.5);
margin-left: 0;
margin-right: 0;
}
/* fixed containers at breakpoints */
@media (min-width: var(--breakpoint-sm)) {
.container { max-width: var(--container-max-width-sm); }
}
@media (min-width: var(--breakpoint-md)) {
.container { max-width: var(--container-max-width-md); }
}
@media (min-width: var(--breakpoint-lg)) {
.container { max-width: var(--container-max-width-lg); }
}
@media (min-width: var(--breakpoint-xl)) {
.container { max-width: var(--container-max-width-xl); }
}
@media (min-width: var(--breakpoint-xxl)) {
.container { max-width: var(--container-max-width-xxl); }
}
/* Row */
.row {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--gutter-x) * -0.5);
margin-right: calc(var(--gutter-x) * -0.5);
row-gap: var(--gutter-y);
}
/* Column base */
.col {
position: relative;
width: 100%;
min-height: 1px;
padding-left: calc(var(--gutter-x) * 0.5);
padding-right: calc(var(--gutter-x) * 0.5);
flex-basis: 0;
flex-grow: 1; /* auto-fit columns */
}
/* Fixed-width columns: .col-1 ... .col-12 */
[class*="col-"] {
/* ensures classes like col-1, col-2 get overridden only when used */
}
.col-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); }
.col-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); }
.col-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); }
.col-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); }
.col-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); }
.col-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); }
.col-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); }
.col-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); }
.col-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); }
.col-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-12 { flex: 0 0 calc(100% * 12 / 12); max-width: calc(100% * 12 / 12); }
/* Order utilities (optional but handy) */
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
/* Column offsets (push) */
.offset-1 { margin-left: calc(100% * 1 / 12); }
.offset-2 { margin-left: calc(100% * 2 / 12); }
.offset-3 { margin-left: calc(100% * 3 / 12); }
.offset-4 { margin-left: calc(100% * 4 / 12); }
.offset-5 { margin-left: calc(100% * 5 / 12); }
.offset-6 { margin-left: calc(100% * 6 / 12); }
.offset-7 { margin-left: calc(100% * 7 / 12); }
.offset-8 { margin-left: calc(100% * 8 / 12); }
.offset-9 { margin-left: calc(100% * 9 / 12); }
.offset-10 { margin-left: calc(100% * 10 / 12); }
.offset-11 { margin-left: calc(100% * 11 / 12); }
/* Responsive: small and up (>= sm) */
@media (min-width: var(--breakpoint-sm)) {
.col-sm { flex-basis: 0; flex-grow: 1; }
.col-sm-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); }
.col-sm-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); }
.col-sm-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); }
.col-sm-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); }
.col-sm-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); }
.col-sm-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); }
.col-sm-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); }
.col-sm-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); }
.col-sm-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); }
.col-sm-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-sm-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-sm-12 { flex: 0 0 calc(100% * 12 / 12); max-width: calc(100% * 12 / 12); }
}
/* Responsive: medium and up (>= md) */
@media (min-width: var(--breakpoint-md)) {
.col-md { flex-basis: 0; flex-grow: 1; }
.col-md-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); }
.col-md-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); }
.col-md-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); }
.col-md-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); }
.col-md-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); }
.col-md-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); }
.col-md-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); }
.col-md-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); }
.col-md-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); }
.col-md-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-md-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-md-12 { flex: 0 0 calc(100% * 12 / 12); max-width: calc(100% * 12 / 12); }
}
/* Responsive: large and up (>= lg) */
@media (min-width: var(--breakpoint-lg)) {
.col-lg { flex-basis: 0; flex-grow: 1; }
.col-lg-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); }
.col-lg-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); }
.col-lg-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); }
.col-lg-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); }
.col-lg-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); }
.col-lg-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); }
.col-lg-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); }
.col-lg-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); }
.col-lg-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); }
.col-lg-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-lg-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-lg-12 { flex: 0 0 calc(100% * 12 / 12); max-width: calc(100% * 12 / 12); }
}
/* Responsive: xl and up (>= xl) */
@media (min-width: var(--breakpoint-xl)) {
.col-xl { flex-basis: 0; flex-grow: 1; }
.col-xl-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); }
.col-xl-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); }
.col-xl-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); }
.col-xl-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); }
.col-xl-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); }
.col-xl-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); }
.col-xl-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); }
.col-xl-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); }
.col-xl-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); }
.col-xl-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-xl-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-xl-12 { flex: 0 0 calc(100% * 12 / 12); max-width: calc(100% * 12 / 12); }
}
/* Responsive: xxl and up (>= xxl) */
@media (min-width: var(--breakpoint-xxl)) {
.col-xxl { flex-basis: 0; flex-grow: 1; }
.col-xxl-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); }
.col-xxl-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); }
.col-xxl-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); }
.col-xxl-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); }
.col-xxl-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); }
.col-xxl-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); }
.col-xxl-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); }
.col-xxl-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); }
.col-xxl-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); }
.col-xxl-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-xxl-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-xxl-12 { flex: 0 0 calc(100% * 12 / 12); max-width: calc(100% * 12 / 12); }
}
/* Utility: hide on breakpoint */
.d-none { display: none !important; }
@media (min-width: var(--breakpoint-sm)) { .d-sm-none { display: none !important; } }
@media (min-width: var(--breakpoint-md)) { .d-md-none { display: none !important; } }
@media (min-width: var(--breakpoint-lg)) { .d-lg-none { display: none !important; } }
@media (min-width: var(--breakpoint-xl)) { .d-xl-none { display: none !important; } }
/* Small helper: vertical alignment */
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
/* Example visual helper (not required) */
.grid-debug { background: rgba(0,0,0,0.05); border: 1px dashed rgba(0,0,0,0.1); padding: 0.5rem; }
#header-app .navbar-nav {
list-style-type: none;
}
#header-app .navbar-nav li {
display: inline-block;
margin-right: 20px;
}
You can use it the same way as you do for bootstrap. Also, navbar CSS for header is added so they will be displayed horizontally.
That’s it. That’s how you can use media queries in CSS and make your website responsive for all devices. If you face any problem in following this, kindly do let me know.
