Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive page used Media Queries

#bem

@maxnatalia

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! Any improvements or tips are appreciated :)

Community feedback

Wendy 1,670

@wendyhamel

Posted

Looks great! The change of border radius of the corners for the mobile and desktop versions is what sometimes gets overlooked.

A few tips for you. Between 768px and 900px screen width, the cards do not fit next to each other and sides get cut off. Maybe you want to add an extra media query for the size in between, or keep them stacked up to 900px when they do fit next to each other.

I noticed you have three media queries on the same size. You can combine them to keep your code cleaner.

That’s all I found I could help you with!

Happy coding!

Marked as helpful

0

@maxnatalia

Posted

@wendyhamel Thanks for your advices and tips! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord