Article preview component - No framework - Only CSS and Vanilla JS

Community feedback

• 

  joacomenda•170

  @joacomendaPosted 7 months ago

  There are some improvments that you can do:

  • In your footer, I would recommend creating 2 divs, one div will contain the image of the author of the article, then you create another div that contains the author and the date of publish. In the second div, you would put the button of the article (you can create a button element, then you copy and paste the share svg that frontend mentor gives you and then you put some text in the button, then you style it to have 0 font-size so screen readers can undestand that the button is used to share content). Now, you style the div that contains the 2 divs, use display:flex, align-items:center and justify-content:space between. With this, your footer is perfectly aligned and your button is in the far left of the article.

  • When users display your article in an ipad, the layout goes far down, be careful with that. I would recommend you to investigate about how can you center content perfectly using grid or flexbox. In my body, I display:flex, justify-content:center (to put it in the center of the page in the X axis) and align-items:center(to align it to the center in the Y axis). This only works if you put a height of your body to 100vh and set a width to your wrapper.

  *I would also sugest using max-width in order to avoid an excesive stretching of your article

  I hope this comment helps you to make better and more responsive designs.

  1