---
title: "Discussion on \"How to Make a Webpage Responsive\" | Hashnode"
description: "Discussion on \"How to Make a Webpage Responsive\". During the early years of the web, only a computer could access a website, but today we can access the web using a mobile phone, tablet, and even tv. All these devices have various screen sizes. Web developers must create websites that can adapt to a..."
url: "https://hashnode.com/posts/how-to-make-a-webpage-responsive/601e66ca1054fa16dadd89e2"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to Make a Webpage Responsive](https://fefe-writes.hashnode.dev/how-to-make-a-webpage-responsive?utm_source=hashnode&utm_medium=feed)

During the early years of the web, only a computer could access a website, but today we can access the web using a mobile phone, tablet, and even tv. All these devices have various screen sizes. Web developers must create websites that can adapt to a...

Feb 6, 2021 · 5 min read · fefe-writes.hashnode.dev  
Updated Jul 11, 2025  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#web-development](https://hashnode.com/tag/web-development)
-   [#responsive-web-design](https://hashnode.com/tag/responsive-web-design)
-   [#frontend-development](https://hashnode.com/tag/frontend-development)

## Written by

[Efe Akhigbe](https://hashnode.com/@efeakhigbe)

@efeakhigbe

  
[View profile](https://hashnode.com/@efeakhigbe)

UX Designer || Open Source Contributor

## Responses 2

Markdown supported · ⌘↵ to post

[Peter Singh](https://hashnode.com/@aFuzzyBear)

[Feb 6, 2021](https://hashnode.com/posts/how-to-make-a-webpage-responsive/601e66ca1054fa16dadd89e2/comment/601e90721054fa16dadd8d00)

hey, nice article, I found a couple of 'golden rules' when it comes to setting up my stylesheet that I think you might find helpful. Firstly, absolute units are the way of the sith...relative units are what we jedi use. This means where at all possible use viewport units (v/min/max/w/h) or element mesurements (r/ems) %'s can be tricky sometimes but they work. The odd execption would be when setting values for border size and box-shadow effects cause they use px's as part of their applied function. Another would be to set the font-size in the root of your html to be responsive, best way to do this is `:root{font-size:calc((0.5->1)em + (0.25->1)vmin/w)` those are the range of values that best work I have found. From there set your HTML elements to have rem font sizes for each tag you want to have controll over. Another would be also setting the page dimensions using only vw and vh using vmax and vmin is often troublesome. If you are using a CSS preprocesser like SASS or LESS you can work your media queries straight into the class selectors instead of having to write your media queries elsewhere on the stylesheet, (saves alot of time going backwards anf forwards over sometime very large stylesheets). With images, and more in general just maintaining aspect-ratio for boxes there has been a bit of hackery but conventions seem to be aligning and hopefully we can see the `aspect-ratio:16/9` be more widely adopted by the other vendors. There is a bit more I could go into but those have kept me towards the light and away from the dark more insidious forces of the CSS underworld....

[Efe Akhigbe](https://hashnode.com/@efeakhigbe)

[Feb 7, 2021](https://hashnode.com/posts/how-to-make-a-webpage-responsive/601e66ca1054fa16dadd89e2/comment/601e90721054fa16dadd8d00#reply-601ff657636acc2a3822fb88)

Wow! Thanks for sharing

[Toriola Faidat Olabisi](https://hashnode.com/@Toriola)

[Feb 6, 2021](https://hashnode.com/posts/how-to-make-a-webpage-responsive/601e66ca1054fa16dadd89e2/comment/601e6f70072bc516ff6f5042)

Sweet!

[Efe Akhigbe](https://hashnode.com/@efeakhigbe)

[Feb 7, 2021](https://hashnode.com/posts/how-to-make-a-webpage-responsive/601e66ca1054fa16dadd89e2/comment/601e6f70072bc516ff6f5042#reply-601ff66e636acc2a3822fb8f)

Thank you