CSS flexbox was used in this project

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi! Good Job on the challenge!

  • The button is offsetting due to the lack of content in the last div. See how the other box paragraphs wrap onto new lines while the the last box is missing a line hence the offsetting.
  • You can fix this by increasing the left and right padding of the content divs from 30px to 45px (45 seems fine as it matches the design but you can increase just so all the content divs have the same amount of paragraph lines). Something like this:

  .content-1, .content-2, .content-3 {
  padding: 30px 45px;
  }
  

  • This should align the button with others.

  🎯 Some things that might improve your code:

  • See how the button says "Learn More" , usually when a person clicks this they would be sent to a new page. Buttons are to be used for performing an in-page action and anchors/links are for navigating to a new page. So these should actually be anchor tags rather than button elements. No need to change much, just change the tags to <a> tags but dont forget to add display:inline-block to the css class because <a> tags are generally inline by default so the margins/paddings wont apply unless you change it into a inline-block element.

  📱 Instead of using a div as a container try using a semantic element like <main> tag like this:

  <main class="container">
  //rest of the code
  </main>
  

  • The <main> tag provides a clear and meaningful structure to the HTML as it helps assistive technologies and search engines to understand the the main content of a document.Read more about it here!

  🖊️ Instead of using absolute units like px for font sizes use relative units like rem for it. Try giving this blog a go to understand it better.

  I hope this clarified your doubt and helped you gain some info about new things!

  Keep growing and keep coding!🙌🏻

  Marked as helpful

  0
• 

  Leroy-sama•300

  @Leroy-samaPosted over 1 year ago

  Thanks a lot Aditya. I'll definately switch to semantic tags and learn more about rem units.

  0