Clipboard landing page

Hi!

At first I noticed that the content was being contained always at the center even in wider screens. That's good!

I realized that there were some text elements that had <br> in there just to make some vertical space.

A more convenient way to do it, is by limiting the width of the text container. Then if the text grows bigger than that width, it'll wrap inside it, instead of growing sideways like crazy.

I also noticed some horizontal scroll in all widths. After searching a little bit, I found out what was causing it. The companies container, and the features container were both wider than the div.content in some small widths. But the footer was always wider, no matter in what width.

A fix for the footer issue is using box-sizing: border-box on the footer tag. Usually, when you set the width of an element, and then add border or padding to it, it'll be extra space to that width. And sometimes you just expect it to be included in that width. That's what border-box does.

You can check this guide: https://css-tricks.com/box-sizing/

And a fix for the features and companies containers, is trying to limit the size of them, and of the 'main' containers, like body and div.content.

I see you use flex-box, so you can try using flex-wrap. This allows the items inside the flex-box to get into another row/column if there's not enough space to fit them all.

Try adding this to your ul.companies and ul.features:

flex-wrap: wrap;
justify-content: center;

And of course, adding media queries as scorpion suggested.

Nice work :) It looks polished. The work with the buttons and sections it's pretty good.

Hello @hammercait, Very nice one. I also completed the same challenge couple days ago. Looks beautiful 😉 My suggestion is to make it responsive with media queries. To be able to use media queries easier, my humble suggestion would be to use flexbox and/or CSS Grid for each section of the page. Good job again 👍