Responsive Blog preview card

Community feedback

• 

  T

  Phil Daum•50

  @PhillipDaumPosted 3 months ago

  Nice work Majdi!

  • You could try indenting your code more frequently for increased readability, or if you are using an IDE like VS Code, installing a code formatter like Prettier

  • Font sizing in px is not best practices. Try converting to rem so it can change with screen sizes. I got a great comment on rem and em vs px, recently which was very helpful.

  • My instructors have told me that <br> tags tend to be pretty old school and have few use cases these days, and that it is better to handle this sort of stuff with CSS.

  • I was able to fix the border radius on phone screen issue by:

    • removing .card img from the media query
    • removing the height and width from .card img and adding width: 100%, this means it will not go beyond the bounds of the containing element.
    • adding padding to .card I added padding: 1.5rem
    • This messes up some other stuff, so I removed the 24px margin from most of the elements, which helps.
    • Then there was a big gap at the bottom of the card, so I justify-content: center from the .card class and removed the hardcoded heights in pixels from .card, and also in the media query. I think the hardcoded heights are what did it.
    • This does leave the card a little bit short. I’m thinking this could be fixed by adding spacing between some of the elements.

  Marked as helpful

  0

  ---

  

  Majdi Neji•140

  @majdi-nejiPosted 3 months ago

  @PhillipDaum i honestly wasn't aware of how important these practices are i will definetly implement them thank you

  1

  

  T

  Phil Daum•50

  @PhillipDaumPosted 3 months ago

  @majdi-neji Glad it was helpful, thanks!

  1