Responsive Blog Card

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 29 days ago

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

  • There is no need to include "image" in the alt text, as screen readers announce that by default.

  • "Learning" is a <p>.

  • I would wrap the date in a <time> element:<p class="published">Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • As this is a blog card, the heading needs a link inside.

  • "Greg Hooper" is a <p>.

  • .attribution should be a <footer>, and you should use <p> for the text inside.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove max-width on body.

  • Remove the margin on the card.

  • To center the card horizontally and vertically, with space between the main and the footer, I would use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  gap: 2rem;
  

  • Except for the author image, remove all widths and heights in px.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • On "Learning", add width: fit-content - this makes it take up only the width of the text plus the padding.

  • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem or em, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

  Marked as helpful

  1

  ---

  

  Ahmed Nafrawy•150

  @Ahmed-NafrawyPosted 29 days ago

  I will take that into consideration! Thank you a lot

  Let me qsk you something, how can I make the svg square? I tried to give it the same height and width but it doesn't work, and tried aspect ratio and also doesn't work!

  So how do you think I can achieve it?

  Maybe in the svg code it's there will be a predeclared heighr and width and I can't redeclare it cuz of it? (I hadn't look it up yet, but I will, I am only asking if there is another way I don't know of@Islandstone89

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 29 days ago

  @Ahmed-Nafrawy Hm, if you use an inline svg (<svg> tag with code inside of it), you can change the width and height directly inside the svg.

  Marked as helpful

  1

  

  Ahmed Nafrawy•150

  @Ahmed-NafrawyPosted 29 days ago

  I will try that, thank you 🙏@Islandstone89

  1