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>


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.

ā¤ļøšŸ’» šŸ™‚