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

recipe-page

@AnwarMestycer

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

still need some work to make it completely responsive

What challenges did you encounter, and how did you overcome them?

making it responsive to small screens was challenging.

What specific areas of your project would you like help with?

how to make responsive

Community feedback

@Natty-tech

Posted

Hello👋

Good job on the project! I can see you have used media query on your class ".card" element. But you can just use the max-width property and get rid of the extra media queries like the one below.

.card{ width: "90%"; max-width: "600px"; /other properties .../ }

/* this property will allow the card class to have a 600px width if the width of the browser is greater than 600px and will become 90% in size when the browser is less than 600px" */

1

@AnwarMestycer

Posted

Thank you @Natty-tech

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