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. Paddi...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.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.
Comments more helpfull than post lmao
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 :)
Thank you!! Your comment made my day and glad you liked it, all the best for your website. 😊