Responsiveness in web design is so important that people check your web application’s responsiveness before proceeding further. Responsiveness can be tedious especially without css frameworks like tailwindcss, bootstrap, chakraUI, materialUI and more.
However, using the percentage styling method makes it easy to build responsive sites.
For each break point, apply a percentage for the height and width. It automatically gives you the percentage of the container relative to the initial width and height.
Try this, it is easy and sweet.
Another thing to avoid is using padding-left and padding-right as much as possible.
It not only gives your application an over-flow but also creates unwanted space in other devices.
And considering that different browsers and devices have different views, it is important to use a global style that adjust in different browsers and devices.
You can use flexbox or grid.
It is better to use either of them not the both.
This makes responsiveness so easy as it will only require the out layer.
My Twitter Handle: https://twitter.com/mchelleOkonicha
My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/
Top comments (3)
I have been using these media queries gist.github.com/gokulkrishh/242e68...
Yes, in your media queries, you simply adjust width and height
Kindly drop your questions and suggestions.