@FluffyKas
Posted
Hey there,
Your solution looks good on the two specified screen sizes, however you should aim for making it work for all widths. There's a few issues with this solution:
-
Your breakpoint isn't working well at the moment. My suggestion would be to start with the mobile view and as the screen size grown you gradually change css rules. You can even add more than one media query if needed.
-
Your images lack responsiveness thanks to this piece of code:
width: 100%. This means your images will be 100% width, even if they don't fit the screen size, that's why you're having issues in a couple of places. Just change it tomax-width: 100%andheight: auto, that should take care of it. -
There's a fixed height set on your "rows" which is causing an overflow on most screen sizes. You don't need to set a height for most elements, just avoid it when you can!
-
Buttons have some default styles you need to overwrite when you're working with them, like font-family.
-
Your social media links are missing aria-labels.
This can be a fairly tough challenge if you're not confident with flexbox, positioning and media queries. Doing some easier challenges first would be a good idea perhaps, they are a great way to practice these things on a slightly smaller scale! Or you could just keep going with this one but in that case I suggest you look up some of the topics mentioned above. If you don't already know Kevin Powell, check out his channel, he has plenty of great videos on all CSS topics!
Marked as helpful
