Hi folks, hope you are doing well. In this post I am going to share you some tips that I personally use while making websites responsive.
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 <div>,<p> 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.
{box-sizing : border box;}
If you know of other tips/tricks, let me know in the comments. Thanks for reading :)
Connect with me on -
Top comments (41)
CSS grid?
Thank you for mentioning. I personally don't use CSS grid a lot, cause flexbox does the trick for me.
One command I use is -
{ display : grid ;
place-items : center ;
}
To align items vertically and horizontally :)
You miss a lot. CSS grid min/max/fit content, etc. I recommend using it for building large layouts instead of flex.
Thank you for sharing. And I 100% agree that CSS Grid is more beneficial in building large layouts. π
I will definitely try to use CSS Grid in my future projects.
Of course it misses a lot, it's a 5 item list, it's not trying to cover everything.
Grid isn't a 1 for 1 replacement for flexbox, plenty of situations where flex is 100% the way to go.
every-layout.dev/layouts/sidebar/ β Something like this actually just can't be done with grid. Container queries will change that, but for the time being you've still gotta reach for flex box.
Enjoyed the article thank you! For number 5, I think you forgot to mention the value for the box-sizing property:
* { box-sizing: border-box; }It really should have been the default value! The current default
content-boxis definitely more confusing and only very occasionally what you actually want.Thank you for your valuable suggestion, really appreciate it!!
I will definitely add
{ box-sizing: border-box; },thank you for pointing it out π and totally agree with the
content-boxproblem.Matthew Morete, maybe I got misunderstood, but I actually meant that CSS Grid is good to use instead of flex, but not for everything. In fact, it's recommended to use a combination of both. Where each of them fits better. The main point is to not ignore the CSS grid completely.
Why not combine both?
Combine both? Could you give an example?
To get an idea... gist.github.com/ThomasJunk/ce4122e...
Got it! Thanks for sharing:)
didnt know about place-items center, love grid and flex, if I knew them when I started with css, it wouldve been much easier :D taught a trainee html and css in the past few weeks, she built a shop page within just a few days with help of flex and grid.
they are just time safers and let you build uis more efficient. I always align items center h/v using df, jcc and aic. the place-items will safe me 1 css property in the future :D
Glad to help!π I too use jcc and aic a lot!
And did you know you don't need Grid for that? This works just the same:
and since
display: flex;has wider support thandisplay: grid;then I would stick with Flex. Use Grid when you actually need it!I just checked own my own, using display: grid; it aligns vertically and horizontally (exactly at the center of div). And using display: flex; it does something weird.(like if the flex-direction is row(by default), then it will align center column wise )
Try it out :) , you will understand better.
Flex also aligns vertically and horizontally :)
π€
Sorry @fidalmathew , I was wrong. Flex does require at least 2 properties set to align any number of items both vertically and horizontally and by default it will make a row of multiple items. Grid requires only 1 property. With 1 element to place both
place-itemsandplace-contentdo the same thing. With multiple items Grid will make a column, but it'splace-contentthat does better job overall thanplace-items:No need to be sorry :), it was just your point. Thanks for sharing about "place content: center", got to learn something new. π
Also, Grid is important.
Yup!
use clamp() to reduce font size based on the viewport
Thanks, I had never heard of it before. I will surely learn about clamp() and use it in my upcoming projects.
Lovely post this is .
Thanks for shring great tips !
Keep it up
Thank you!!
I am glad, you liked it.
Apple only responsive design?
Are you referring to one of my projects ?π
It was just a joke - I was looking at the image and it showed an Apple phone, Apple tablet and an Apple laptop.
Almost like the breakpoints of the css was fitted to the Apple device groups specifically.
ooh lol, yeah CSS breakpoints doesn't work that way. Its a mess π
Agree.. cheers
This information helped me to understand which pages and other elements of your website need to be readily available on smaller screens. best black magic specialist in India
I need to learn flexbox n grid
Good luck π, it will be useful for your upcoming projects :)
Thanks a lot!
Glad you liked it! π
clamp()
Thank you! I had never heard of it before. I will surely learn about clamp() and use it in my upcoming projects.
Thank you!! Your comment made my day and glad you liked it, all the best for your website. π
But, as a beginner I feel its essential to use them. Also it comes in handy when there is a need to adjust font-size, image width etc :)
Some comments have been hidden by the post's author - find out more