Open Menu dzosoft
Close Menu dzosoft




Publish perfectly-optimized content in 1-click


How To make a responsive website

How To make a responsive website
Responsive Web Design (RWD) is the use of HTML and CSS to automatically resize, hide, shrink, or expand a website, to make it look great on all devices (desktops, tablets, and phones).


Mobile-first approach

It is about starting the design of the product first for a mobile version which includes the most basic functions and then we move on to the advanced version for tablet or PC.
How To make a responsive website

This Mobile First approach avoids loss of content when moving from a larger screen to a smaller screen.
Indeed, if we take the design of the mobile end product as a starting point, under restrictions such as bandwidth,
screen size, etc., designers will naturally grab the key points of a product to turn to a sober and neat product with priority features.
Also since 2016, we know that mobile internet usage surpassed desktop usage in 2016.

Use media queries

It is CSS technology based on media-queries that allows this adaptation.
The principle is simple: from a certain screen size, we apply a specific CSS to switch the presentation: this is called a breaking point.
With the code below, CSS code will be executed as soon as the screen size is greater than or equal to 600px:
@media screen and (min-width: 600px) {
  /* css to execute */

For example, we will change the background color of the page (blue) as soon as the screen size is greater than 600px:

@media screen and (min-width:600px{
    background-color: red;

How To make a responsive website


Media queries and Mobile First

In a Mobile First approach, we must first create the CSS for mobile formats and then use media-queries for larger screens (desktop).
Hence the use of the min-width instruction which means greater than or equal.
Continuing the example above, we are going to change the content of the page in relation to the size. We will use display: none to hide inappropriate content.


HTML code

<!-- Mobile content -->
<p id="mobile">Mobile content</p>
<!-- Desktop content -->
<p id="desktop">Desktop content</p>

How To make a responsive website


CSS code:

/* CSS pour le format mobile */
  display: none;
  display: block;

/* CSS pour les grands écrans */ @media screen and (min-width:600px){ #mobile{ display: none; } #desktop{ display: block; } })

Notice that the mobile CSS is done first.


Add viewport meta tag

If you want to give instructions to the browser on how to control the dimensions and scaling of the page, you must add in HTML in the <head> part the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Adjust image size

We talk about a reactive image when it adapts to the size of the screens.
To allow an image to keep its original size on a large screen but to reduce it automatically on a small screen, we use the max-width attribute: 100%


HTML code

<!DOCTYPE html>
/* CSS for mobile */
  max-width: 100%;
<img width="500" 
=eyJhcHBfaWQiOjE0NTg5fQ&s=6c859637d2eb66855ca891674fb6bd45" alt="">


Display different images depending on screen size


The HTML <picture> tag allows you to define different images for different screen sizes. In the example below the content of the image changes when you are on a large screen

<picture >
<source media="(min-width: 650px)" 
        <source media="(min-width: 465px)" srcset="">
        <!-- img tag for browsers that do not support picture element -->
        <img src="" alt="a cute kitten">

Notice the media="(min-width: 500px) syntax which sets the breakpoint to 500px.
We also add, as seen previously, the CSS to adapt the image according to the size of the screen:
/* CSS for mobile */
  max-width: 100%;

How To make a responsive website

It might also interest you

How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example

Leave comment

Save nickname and email in this browser for the next time.

close publicity
Publish perfectly-optimized content in 1-click