Four Card Fueature Challenge

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <h1> with <p> , <h2> with <h1> and <h4> with <h2> to fix the accessibility issue.

  Give the first p a class to style it , in the css give it a lighter font-weight and increase the font-size value.

  Wrap the header in a div give the div a class and in the desktop design, give the header a width of 50% and the div display: grid; place-items: center.

  in the html:
  <div class= "header-text">
  <header></header>
  </div>
  
   in the styling of the desktop design
  .header-text{
  display: grid;
  place-items: center;
  }
  header{
  width: 50%;
  }
  

  in the mobile design reduce the font size for the headings.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  T

  Grace•31,230

  @grace-snowPosted almost 2 years ago

  @Hassiai I actually disagree with the first point. This reads as if it is ONE title, not a paragraph and title. It only makes sense when read all together

  I would therefore have the whole of the top title as the h1 with a light font weight. Then the bold part can be wrapped in a strong or span tag and set to display block.

  I also wouldn’t set anything to width 50% on this. That’s bad practice as it removes all control over the width - you don’t know what screen or device or settings someone is viewing the site on.

  A preferred way to limit width on titles or blocks of text like this is to set max width in ch units, along with margin auto on the sides to center that text on the inline-axis

  Marked as helpful

  1