Blog preview card

Community feedback

• 

  P

  Steven Stroud•11,890

  @StroudyPosted about 2 months ago

  Hey, Great job with this solution you should be proud, A few things I noticed,

  • At wider screen sizes there is a big empty white space to the right hand side, You can fix that by removing width: 1440px; from your body,
  • Missing a <meta> description tag for SEO purposes,
  • Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
  • @media should also be in relative units like rem or em,
  • ‍Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.

  I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻

  Marked as helpful

  0

  ---

  

  Ahmed Eid•170

  @ahmedEid6Posted about 2 months ago

  @Stroudy first point the width: 1440px; it given to me by frontend mentor style guide. So I set width for body to 1440px to match the desired design.

  0

  

  P

  Steven Stroud•11,890

  @StroudyPosted about 2 months ago

  @ahmedEid6, The style guide is just that a guide, It is best practice to make it viewable on all screen sizes, You can check this by opening up your solution, Press F12 and look for an Icon on the top left, Looks like a screen and mobile together.

  Marked as helpful

  0