@Islandstone89
Posted
Hi, great job!
Some suggestions:
HTML:
- The alt text must also say where it leads(frontendmentor website).
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1remofpaddingon thebody, so the card doesn't touch the edges on small screens. -
On the
body, changeheighttomin-height- this way, the content will not get cut off if it grows beneath the viewport. -
I would move the properties on
.wrapperto thebody. You don't need to declarenowrap, as that is the default value forflex-wrap. -
Remove the
widthon the card. Instead, give it amax-widthof around20remto prevent it from getting too wide on larger screens. -
On the image, remove the
widthandheight. Adddisplay: blockandmax-width: 100%- the max-width prevents it from overflowing its container.
Marked as helpful
@Islandstone89 Thanks so much! I made all the changes you suggested. (I always get mixed up when to use min- and max-heights and widths and such. Not sure why I have a hard time with that.) I didn't change the CSS reset. I started looking into that, and it sent me off into hours of different rabbit holes! I need to do some more research into the best way to do that. Thanks again for the feedback! Much appreciated!
