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

Frontend Mentor - Recipe Page

@ViniCellist

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback on this one, please

Community feedback

@Anass-Lamiri

Posted

Hi! First of all, you did a great job in your challenge, I only want to add some pointers to polish your solution:

  • in the mobile viewport you need to make the image full width and without border-radius like in the design image for mobile, here is a solution that you need to add to the media query:
.container__img {
    margin: 0;
    width: 100%;
    height: 12rem;
    border-radius: 0;
}
  • also for the mobile viewport the content should take the full screen :
.container__img {
    margin: 0;
    width: 100%;
    height: 12rem;
    border-radius: 0;
}
  • the last thing is the preparation time section the span is the one that should have that color and the text should have the color provided in the design.

I hope you find this feedback helpful, and feel free to reach out.

Marked as helpful

1

@ViniCellist

Posted

@Anass-Lamiri Thanks! I appreciate your feedback!

0

@ViniCellist

Posted

@Anass-Lamiri I've just fixed the margin and border-radius! Thanks again!

0

@Anass-Lamiri

Posted

@ViniCellist You're welcome.

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