Responsive main news homepage using CSS Grid

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Algirdas 👋

  The problem is caused by the image. By default, img element has display: inline; and it sits on baseline where letters like a, b, c, and d sit on. The space below is for the descenders on letters like g, j, or p. Take a look at this stackoverflow question.

  To solve the problem, simply add display: block; to .top-article__img-box a img selector, so it looks like this:

  .top-article__img-box a img {
      max-width: 9rem;
      height: auto;
      display: block;
  }
  

  Hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Algirdas•390

  @AlgirdasUPosted almost 2 years ago

  @amalkarim Thank you Karim it helped me ;)

  0
• 

  P

  Biljana Kotevska•130

  @BiljanaKotevPosted almost 2 years ago

  your solution is great, can i ask you where you learned to code? Can you send me some resource links ... thanks.

  0

  ---

  

  Algirdas•390

  @AlgirdasUPosted almost 2 years ago

  @BiljanaKotev Hi Bilijana and thank you for the compliment :) I bought several courses from the Udemy https://www.udemy.com/ first was this course for beginers: https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/?src=sac&kw=Build+Responsive+Real-World+Websites+with+HTML+and+CSS whene I learned I bought advanced HTML, CSS course https://www.udemy.com/course/advanced-css-and-sass/?src=sac&kw=Advanced+CSS+and+Sass%3A+Flexbox%2C+Grid%2C+Animations+and+More%21. I hope it helps you ;)

  0