El Responsive

Responsiveness In A Single Line

Key Points 🔥:-

▶️ !important must be ❌ prohibited in your line of code.

▶️ Practice of using rem instead of px in CSS Files. ✅

▶️ The given Technique will almost make everything your website responsive especially the texts.

Things To Do 🎧 :-

👉 First you should replace all the px attributes with rem.

👉 You must have in your mind that 1rem = 16px 💪.

👉 In the html portion of the CSS File put style “font-size: 10px”.

👉 If we write “font-size: 100%” , this implies 16px.

👉 So from the above figure we can conclude that in the html we can apply “font-size: 62.5%” which is 10px and makes 1rem = 10px. By doing so, you have to check all the decimals part of the font size wherever you did wrote the style. For eg. “font-size: 22px”, then the px converts into rem i.e., “font-size: 22rem”, then by checking the decimal we conclude the font size as 2.2rem. It will work though. ITS FOR NORMAL WINDOW SIZE.

👉 NOW IN 998PX DEVICES, FONT-SIZE: 55% = 8.8PX

👉 NOW IN 768PX DEVICES, FONT-SIZE: 45% = 7.2PX

👉 By doing the above, you can make your website fully responsive.

THANK YOU