Responsive page using css flex

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  HTML:

  • The <header> is not needed - it is used for content that stays the same on every page of a website - things like a logo and a navigation bar. One element you do need is <main>, which wraps all content except for the header and footer. This element helps screen readers navigate the site, so it is essential for accessibility. Replace <header> with <main>.

  • Remove the <p> that wraps "Learn More" - you should not use a paragraph inside a link.

  • There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

  • .attribution should be a <footer>, and its text must be wrapped in a <p>.

  CSS:

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

  • 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.

  • I would remove flex-wrap and set flex-direction: column, so the cards stack on top each other. This way, you are doing the mobile styling as default. Write a media query of around 40rem, which changes .wrapper to flex-direction: row.

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

  Marked as helpful

  0