This content originally appeared on DEV Community and was authored by Fidal Mathew
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.
-
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.
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.
This content originally appeared on DEV Community and was authored by Fidal Mathew
Fidal Mathew | Sciencx (2021-11-19T13:59:18+00:00) Responsive Design CSS Tips. Retrieved from https://www.scien.cx/2021/11/19/responsive-design-css-tips/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.