blog preview challenge

Community feedback

• 

  raya•2,870

  @rayaattaPosted 11 months ago

  Hi,the page at the url is not working so I don't know what you mean. But in order to make the <div id="learning"><h4>Learning</h4></div> look closer to the design ,

  Remove

  max-width: fit-content;
  border-radius: 5%;
  

  And then add

     padding:.5rem;
      margin-block:1rem;
     border-radius:.5rem;
      font-weight:800;
  

  If you have any questions do not hesitate to ask. I hope this helps

  Marked as helpful

  0
• 

  raya•2,870

  @rayaattaPosted 11 months ago

  Hello spilltheteapls👋, congratulations on completing this challenge 🎉

  I have some suggestions to help you improve your code.

  1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="container"> With <main class="container">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

  SEO

  And user experience for people using assistive technology such as screen readers.

  2 In order to center your card on any device, Add

  body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height:100vh;
  }
  

  to your code

  I hope this helps 🙃

  Happy coding ✌️

  Marked as helpful

  0

  ---

  

  spilltheteapls•60

  @spilltheteaplsPosted 11 months ago

  @rayaatta thanks for the help. I've some follow-up question about 2.

  I did as you suggested and got the card to center on the desktop view, but it looks like this when it's on mobile: https://i.imgur.com/QUx9Wta.png I'm not sure how to fix this.

  Another issue is the <learning> div is kinda scuffed, I can't recreate it as beautiful as the one in the image examples. If I added padding/margin it'll only look bloated.

  0