Michelle Buchi Okonicha
Michelle Buchi Okonicha's Blog

Follow

Michelle Buchi Okonicha's Blog

Follow
Css Styling Tricks For Responsiveness

Css Styling Tricks For Responsiveness

How To Build Responsive Web Applications With Percentages

Michelle Buchi Okonicha's photo
Michelle Buchi Okonicha
·May 30, 2022·

1 min read

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.

Next up is Flexbox. In my next article.

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/

 
Share this