Thread by @ravikmmr

CSS properties to improve your responsive design of web page💡💪

🧵👇

1⃣ Use Em / Rem

— Always try using em/percentage/rem instead of px, so that the text, images size adjust regarding the device-width

2⃣ Padding/Margin

— we usually use a lot of padding when we make websites for desktops, to make them more attractive.

— While making it responsive for mobiles, tablets try decreasing the existing padding and margin.

3⃣ Flex-Box

— using flexbox to align your HTML elements, such as <div> <p> provides the force elements that can wrap onto multiple lines according to their width.

4⃣ Media Query

— Media query should be used to set width and height according to the breakpoints. Breakpoints refer to the width at which the websites look distorted.

5⃣ Box-Sizing

— It resolves a lot of problems padding causes. Using box-sizing on HTML elements with a percentage width will take padding into account rather than having to adjust the width because of padding

{ box-sizing : border-box ; }

6⃣ Grid-Layout

— Reduced code bloat. Rather than creating extra HTML elements to contain your grid, columns and rows, your grid tracks are created within your style sheet.

Thanks for reading the full thread! ♥️

if you like a thread give it a retweet!

🔗👇

https://twitter.com/ravikmmr/status/1484815575033720833