Four-Card-Feature-Section-Master html css

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted 22 days ago

  Hello BRAHIM AJGAGAL, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  <h1>Reliable, efficient delivery</h1>
  <h1>Powered by Technology</h1>
  

  The most appropriate in this case would be just an h1 tag! containing the two contents, to make them break a line, we can use a max-width, and for the styling we can use a span element with the content that will be changed!

  The main tag must be present in every HTML document so that we can recognize the main content. To fix this, wrap the main content in the main tag. Users of assistive technology will have a better navigation experience on your site thanks to the use of HTML5 landmark elements.

  The rest is spot on.

  Hope it’s helpful to you. 👍

  Marked as helpful

  1

  ---

  

  BRAHIM AJGAGAL•320

  @AslamtoIbrahimPosted 22 days ago

  Hey Adriano, I am good thanks, how about you? Everything you mentioned is logical. I didn’t think of placing the title in one element, thank you for this advice. In fact, I have some questions: Is the way I set the cards (height and width) correct? I am confused about how to handle margins and paddings. Are there any methods I can follow to make my design suitable? Thank you again😉

  0

  

  Adriano•38,120

  @AdrianoEscarabotePosted 21 days ago

  @AslamtoIbrahim It's always a good idea to use max-width, to define a maximum width for the content, so the content won't stretch too much in higher resolutions:

  .cards {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      max-width: 1110px;
      margin: 3rem auto 0rem auto;
  }
  

  0