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

Desktop only, Product review, image is weird for some reason

@yaseenomeira

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I can't make it responsive, any tips?

Community feedback

Martina 150

@PastoreMartina

Posted

Congratulations on completing the challenge! 🎉

To make your page responsive to different screen sizes, you should implement media queries. Here you can find a resource to start learning about them.

Keep an eye on the automatic accessibility and HTML validation report. You should use more sematic HTML in your code; you can read more about it here.

Above all, good job 💪🏻💪🏻

I hope my comment was helpful 😊

0

@Frankmona

Posted

Hi mate, great job! you can make it responsive by

@media screen and (max-width:375px){ .product{ display: flex; flex-direction: column; } }

As well add other styles into the media query.

0

@yaseenomeira

Posted

@Frankmona how do i change the image to fit the screen size?

EDIT: ohh i see now

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