3 col preview with semantic HTML

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  • id are unique , you cannot use the same id on another element . Use class instead. This <button id=#sedan_button>Learn More</button> has been used several times.
  • an inline element span cannot be a parent to block elements p and headings. Use a div on the place of a span.
  • what is the purpose of the following media query? It might be a typo , maybe you wanted to use max-width

  @media screen and (max-height:500px) {
      main {
          min-height: 500px;
      }
  }
  

  • i would encourage you to look into mobile first design , where your base styles is for mobile and the media queries use min-width. Generally , you use less code with mobile first

  • well done on your first project

  Marked as helpful

  1
• 

  James Gisele•70

  @jmgiselePosted about 3 years ago

  Thank you!! I just updated my code to fix the issues you brought up. The media query for a max-height of 500px was so that the footer containing the frontend mentor didn't overlap with the main content when the viewport was smaller than 500px. Without this query on screens of under 500px height (rare, I realize...) the footer overlapped with the main content rather than being pushed below it.

  0