Responsive Design CSS Tips

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 u…


This content originally appeared on DEV Community and was authored by Fidal Mathew

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  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 due to padding.


This content originally appeared on DEV Community and was authored by Fidal Mathew


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Responsive Design CSS Tips." Fidal Mathew | Sciencx - Friday November 19, 2021, https://www.scien.cx/2021/11/19/responsive-design-css-tips/
HARVARD
Fidal Mathew | Sciencx Friday November 19, 2021 » Responsive Design CSS Tips., viewed ,<https://www.scien.cx/2021/11/19/responsive-design-css-tips/>
VANCOUVER
Fidal Mathew | Sciencx - » Responsive Design CSS Tips. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/19/responsive-design-css-tips/
CHICAGO
" » Responsive Design CSS Tips." Fidal Mathew | Sciencx - Accessed . https://www.scien.cx/2021/11/19/responsive-design-css-tips/
IEEE
" » Responsive Design CSS Tips." Fidal Mathew | Sciencx [Online]. Available: https://www.scien.cx/2021/11/19/responsive-design-css-tips/. [Accessed: ]
rf:citation
» Responsive Design CSS Tips | Fidal Mathew | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.