-
Hey there, hope you are doing well. There are a couple of tips that I personally use when I am making websites responsive that I would like to share with you in this article.
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 paddings and margins.
Use em/rem/ percentages - Always try using em/percentage/rem instead of px, so that the text, images size adjust with respect to the device width.
👉 An example could be:
body { font-size:60%; }
div { font-size: 2.4em; }
p { font-size: 1.4rem; }
-
Flex-wrap - Using flexbox to align your HTML elements such as
,etc provides the force elements onto one line or can wrap onto multiple lines according to their width.
Media query - Media query should be used to set width and height according to the breakpoints. Breakpoint refers to the width at which the website starts looking distorted.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
- 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 due to padding.
`{box-sizing : border box;}`
Feel free to add other tips/tricks in the comments section. Thanks for reading :)
Top comments (0)