Cover image of the article showing responsiveness

Member-only story

Crack the code to make responsive websites — the easy way

Sahil Garg
7 min readJan 22, 2024

--

Making the desktop version is easy but when it comes to responsiveness, it becomes very difficult to scale the website down to mobile from desktop without breaking it in between. In this article we break down responsive web design by looking at each method we need to adopt to reduce our work for responsiveness.

Stop using pixels

When coming to responsiveness, it is very important to use the correct CSS unit. Pixels is a very specific unit and using it everywhere will make the website/web app least responsive. It is necessary to use pixels at some places as we will see below but using it for everything will make the code filled with media queries.

Box-sizing

It is really the first step that needs to be done before creating the website. Set the box-sizing property to border-box for all the elements. This will have the affect of taking into account the padding by default when setting width in percentage.

* {
box-sizing: border-box;
}

Font-size

When dealing with headings, usually the default font-size of the h1-h6 is not enough and we need to change it by increasing the font-size, then it becomes a pain to reduce it whenever it breaks as we reduce the screen size.

--

--

Sahil Garg
Sahil Garg

Written by Sahil Garg

Helping aspiring developers become better in the web dev game! UG Researcher, Chairperson at CCET ACM Student Chapter

No responses yet