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

Ben Chi 80

@BenTheChi

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?

It was more difficult with the spacing and using flexbox but overall thought I got pretty close. Sizing the image responsively to center was the most difficult part. Still wasn't quite able to figure it out.

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

Image responsiveness

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

As the width shrinks the image doesn't adjust and center quite correctly. I would like some advice on how to make it shrink and center properly. Previously I was using margin-left/right: auto on the image itself, but it wasn't allowing rounded corners. So I wrapped it in a container, but that cause the image responsive issues.

Community feedback

@LukasBFrontend

Posted

The fonts and colors are quite off, but the sizing and spacing is good! Also try looking into HTML5 semantic elements. Well structured HTML and CSS.

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