Skip to content
OverviewSolutions
2
Comments
2
Jye Harry
@jyeharry

All comments

  • Jye Harry•20
    @jyeharryPosted 3 days ago

    Personally, rather than having BEM class names that start with "blog", I would've continued using class names that start with "card" as they're still part of the card "block".

    Instead of the card being a <div>, I made mine an <article> to make it more semantic and accessible.

    Lastly, your media query which adds padding to the <main> tag only kicks in once the screen reaches 375px, but above that the card briefly touches the edges of the screen. It might be better to just always have that padding on the container.

    Adding to that, you could avoid using media queries to change the font size by instead using clamp() which makes the font size change fluidly. :)

    0
  • Jye Harry•20
    @jyeharryPosted 5 days ago

    Your solution's pretty similar to mine, except you were smart enough to use more semantic tags than I did so good job there.

    Personally, the only thing I would change is removing your .card's fixed height. It doesn't actually matter here, but hypothetically if you were to actually reuse this component but with differing amounts of text, the text may overflow or maybe there'll be too much space in the card due to only a little amount of text.

    Instead, you could let the content and spacing between that content be what determines the height of the card to allow it to be more fluid.

    0