Clipboard landing page

Community feedback

• 

  David Omar•580

  @davidomarfPosted about 4 years ago

  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.

  0

  ---

  

  David Omar•580

  @davidomarfPosted about 4 years ago

  @davidomarf Oh! And the logo seems off-center. If you inspect that element, you'll see that the image is not covering the full size of the div. Try to just remove the background-size property.

  0

  

  hammercait•250

  @hammercaitPosted about 4 years ago

  @davidomarf thank you so so much for your feedback! I will implement your suggestions for sure! I am terrible at media queries, need to take a class on them but hopefully I will be able to do that soon! I appreciate you taking the time to do this more than you know!

  0
• 

  Emin Muratoglu•190

  @scorpion61Posted about 4 years ago

  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 👍

  0

  ---

  

  hammercait•250

  @hammercaitPosted about 4 years ago

  @scorpion61 thank you so much for your feedback! Media queries are still super new to me which is why I left them out of the final. I cannot seem to get them to work properly. Need to find a class on them I guess :). Thank you for taking the time to comment! I will definitely use your suggestions to improve the page!

  0