Hi there! I’m here with some tips for you guys! Below are some of them that I personally use to make my websites responsive.
Padding/Margin
We usually use a lot of padding to make our websites look attractive and interesting. But you have to keep in mind that, when you’re making your website responsive for mobiles and tables, try reducing the existing padding/margin.
Box Sizing
Using box sizing on HTML with a percentage width will solve a lot of problems that padding causes. Box sizing with a percentage width will keep padding in mind as opposed to you having to adjust the width during padding.
{box-sizing : border box;}
Flex-wrap
Flex-wrap helps you to align your HTML elements like <div>,<p>, and forces those elements on a single line or wraps them on multiple lines according to the width.
em/rem/ percentages
Try to always use em/percentage/rem instead of px the next time you’re trying to make a responsive design so that texts and image sizes would adjust according to the device that is being used.
Media query
To set a graphic according to the breakpoints (refers to the width where the website starts to look distorted), use media query to set the width and height.
If you know of other tips & tricks, let me and our fellow devs know so we’re all better off when we make our next responsive designs. Cheers! :)
Top comments (0)