CSS and responsiveness is always a challenge to most developers(or should I speak for myself?). Before I bumped into this 21 day challenge from Kevin Powell, I was trying to create a portfolio website and anytime I added a few lines of CSS code, my site would break, become unresponsive and some sections would even disappear. And honestly, what's worse than battling responsiveness and layouts?

So I decided to write a summary of all the new hacks that I will be learning for the next 21 days on conquering responsiveness by Kevin Powell, and I hope this helps someone out there.

What I learnt on Day 1?

Percentages vs fixed width

Fixed width

Having fixed widths in our elements results in side scrolling in smaller screens, like the

CSS is awesome image that we have below.

So how do we avoid such issues?

• One way of avoiding them is by not creating one at all. Avoiding fixed widths and using CSS only when needed.

Note that when we don't assign a width to our block element, the layout is responsive.

• Another way of avoiding overscroll is by working with percentages for our widths.

There are a few exceptions to when to use fixed widths and heights; for example when you want to implement a scroll. Scroll property cannot work with percentages.

Percentages on the child

A child element is an element that is directly contained by another element.

Child elements take up the percentage of the parent elements. For example, if you assign a 50% on a child, and the parent is 80%, the child takes 50% of the 80%. Here is an example of a code snippet.

Why it is a good idea to avoid heights.

Naturally, websites are responsive and adding heights can result in a few problems. To avoid encountering such problems we can avoid adding fixed heights to our elements. Adding padding to our elements can help with our background images and colors, this helps us avoid responsive issues resulting from assigning heights to our element.

This is all from Day 1 and I hope it helps someone avoid responsive issues.