Member-only story
Crack the code to make responsive websites — the easy way
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.