Responsive Webpage Using Flexbox

Community feedback

• 

  P

  Øystein Håberg•10,810

  @Islandstone89Posted 11 months ago

  HTML:

  • You need a <main>, this is important for accessibility. Change .main-container to a <main>.

  • The icons are decorative, so the alt text should be empty: alt="".

  • The headings should be written with normal capitalization. You then use text-transform: uppercase to change the capitalization in CSS.

  • "Learn More" would navigate to another page, hence it is not a button but a link.

  • Footer text needs to be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • body should have min-height instead of height. Also, add justify-content: center and align-items: center to center the card container in the middle.

  • Remove flex: 1 on .main-container.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove all fixed widths and heights. You rarely want to set fixed dimensions (especially heights!), as this easily creates issues with responsiveness.

  • If needed, add a max-width in rem on the card container, so it doesn't stretch too wide on big screens.

  • "Learn More" should not have position: absolute.

  • Media Queries should be in rem instead of px. You don't want any percentage widths. And it's good practice to do mobile styles first, and use media queries for larger screens.

  0