CSS - responsive styles for desktop and mobile (desktop first approach)

4 points
Created by:

In this short article, we want to show how to create responsive desktop and mobile styles for a simple page layout using @media queries in CSS.

The below example uses a desktop-first approach - it means at first we have created styles for desktop and later some of them were overwritten using @media block to achieve mobile styles.

Responsive desktop and mobile styles using @media queries in CSS.
Responsive desktop and mobile styles using @media queries in CSS.

Note: run the below example and change the web browser window size to smaller - you will see the effect. 

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
	/* Desktop first approach */
	/* Default styles for Desktop */
    div.header {
    	background: #adadff;
      	height: 50px;
    div.container {
      	height: 200px;
      	display: flex;
    } {
    	background: #ff6b6b;
      	flex: 0 0 200px;
    div.content {
    	background: orange;
      	flex: auto;
    div.footer {
    	background: #7dd96d;
      	height: 50px;
	/* Mobile styles for screen width <= 550px */
	@media (max-width: 550px)
		/* below styles overwrite desktop styles */
		div.container {
			background: orange;
			height: auto;
			display: block;
		} {
			flex: none;
			height: 50px;
		div.content {
			flex: none;
			height: 300px;
  <div class="header">Header ...</div>
  <div class="container">
    <div class="menu">Menu ...</div>
    <div class="content">Content ...</div>
  <div class="footer">Footer ...</div>


Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂