My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Raw notes on Responsive CSS (Conquering Responsive Layouts by Kevin Powell)

Dheeraj Malik's photo
Dheeraj Malik
·Sep 21, 2021·

2 min read

//not an article just raw notes of lecture I saw year ago

When we dont assign width to any thing our layout remains responsive, we dont have to give media queries in that case.

Percentages vs Fixed Size Default width on a block level element is 100% But 100% of what?Its always 100%of parent element, it may be body tag, some div tag any thing So when using percentages we are better off beacuse when the view ie mobile or desktop or tablet or anything changes we always have responsive view when we use percentages.

Avoid giving heights if possible, incase in some cases we want to give more background space use padding in that case like give more adding to baackgrpun image or whatever, use responsive units like em in such case

Remember websites are responsive by default if something is breaking it must be us who would have done mistakes.

em's and rem's

One thing that developers always make mistake is covering text completely from left to tright we dont want to move our head completley from left to right so to aboid tha we can set our max width to some thing like 750px. we are not removing width 50%, we are just setting another property that after maximum width of 750px out responsiveness need no work as it will create bad user experience.

As we saw, setting a fixed width on an element tends to be a bad idea. Instead we can use percentages, which make our lives easier. The only issue with this is, at large screens, things can get too big. Thankfully, we have max-width that can help us out!