DEV Community

Cover image for Responsive Design CSS tips
Fidal Mathew
Fidal Mathew

Posted on • Updated on

Responsive Design CSS tips

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 -

Discussion (43)

Collapse
awps profile image
Andrew Surdu

CSS grid?

Collapse
fidalmathew profile image
Fidal Mathew Author

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 :)

Collapse
awps profile image
Andrew Surdu

You miss a lot. CSS grid min/max/fit content, etc. I recommend using it for building large layouts instead of flex.

Thread Thread
fidalmathew profile image
Fidal Mathew Author

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.

Thread Thread
matthewmorete profile image
Matthew Morete

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-box is definitely more confusing and only very occasionally what you actually want.

Thread Thread
fidalmathew profile image
Fidal Mathew Author

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-box problem.

Thread Thread
awps profile image
Andrew Surdu

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.

Thread Thread
thomasjunkos profile image
Thomas Junkツ • Edited on

good to use instead of flex

Why not combine both?

Thread Thread
fidalmathew profile image
Fidal Mathew Author • Edited on

Combine both? Could you give an example?

Thread Thread
thomasjunkos profile image
Thomas Junkツ
Thread Thread
fidalmathew profile image
Fidal Mathew Author

Got it! Thanks for sharing:)

Collapse
skitzdev profile image
Justin Praßl

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

Thread Thread
fidalmathew profile image
Fidal Mathew Author

Glad to help!😄 I too use jcc and aic a lot!

Thread Thread
sharakpl profile image
Sharak • Edited on

And did you know you don't need Grid for that? This works just the same:

display: flex;
place-items: center;
Enter fullscreen mode Exit fullscreen mode

and since display: flex; has wider support than display: grid; then I would stick with Flex. Use Grid when you actually need it!

Thread Thread
fidalmathew profile image
Fidal Mathew Author

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.

Thread Thread
sharakpl profile image
Sharak

Flex also aligns vertically and horizontally :)

Thread Thread
fidalmathew profile image
Fidal Mathew Author

🤔

Thread Thread
sharakpl profile image
Sharak • Edited on

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-items and place-content do the same thing. With multiple items Grid will make a column, but it's place-content that does better job overall than place-items:

display: grid;

Thread Thread
fidalmathew profile image
Fidal Mathew Author

No need to be sorry :), it was just your point. Thanks for sharing about "place content: center", got to learn something new. 😄

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
wesamhabutiema profile image
Wesam Abu Taima

Also, Grid is important.

Collapse
fidalmathew profile image
Fidal Mathew Author

Yup!

Collapse
albencfc profile image
Albenis Kërqeli

use clamp() to reduce font size based on the viewport

Collapse
fidalmathew profile image
Fidal Mathew Author

Thanks, I had never heard of it before. I will surely learn about clamp() and use it in my upcoming projects.

Collapse
spock123 profile image
Lars Rye Jeppesen

Apple only responsive design?

Collapse
fidalmathew profile image
Fidal Mathew Author

Are you referring to one of my projects ?😅

Collapse
spock123 profile image
Lars Rye Jeppesen

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.

Thread Thread
fidalmathew profile image
Fidal Mathew Author

ooh lol, yeah CSS breakpoints doesn't work that way. Its a mess 😂

Thread Thread
spock123 profile image
Lars Rye Jeppesen

Agree.. cheers

Collapse
spandyboss profile image
SpandyBoss

Lovely post this is .
Thanks for shring great tips !
Keep it up

Collapse
fidalmathew profile image
Fidal Mathew Author • Edited on

Thank you!!
I am glad, you liked it.

Collapse
furryreign profile image
FurryReign

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

Collapse
deptfut profile image
deptfut

I need to learn flexbox n grid

Collapse
fidalmathew profile image
Fidal Mathew Author

Good luck 👍, it will be useful for your upcoming projects :)

Collapse
piyush181 profile image
Piyush Raj

Thanks a lot!

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it! 😊

Collapse
laindom_1 profile image
lain_js

You saved my life, I just found myself thinking about the changes I would make to a website that I was making!

Collapse
fidalmathew profile image
Fidal Mathew Author

Thank you!! Your comment made my day and glad you liked it, all the best for your website. 😊

Collapse
kpogo profile image
kpogo

clamp()

Collapse
fidalmathew profile image
Fidal Mathew Author

Thank you! I had never heard of it before. I will surely learn about clamp() and use it in my upcoming projects.

Collapse
carterchar profile image
Info Comment hidden by post author - thread only accessible via permalink
charlieCarter • Edited on

Comments more helpfull than post lmao

Collapse
starkana profile image
aco

dont need media queries really, minmax and grids can do it all

Collapse
fidalmathew profile image
Fidal Mathew Author

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