Skip to content
Submitted 8 months ago

Recipe page

Eric Aguayo•945
@EAguayodev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud to have adjusted the td spacing with CSS to match the design.

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

I encountered some challenges with having space between the data needed in the td tags within each row of my tables.

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

I had difficulty with some parts of the project and I would like to bring them to your attention. Despite adjusting the size in the card layout and img-omellette classes, the horizontal scroll on the mobile version still persists. I would really appreciate any assistance in identifying the issue.

Community feedback

  • yas-avocad•380
    @yas-avocadPosted 8 months ago

    Hey!

    Not sure about the mobile design issues, but for the table, I ended up just using <div> rather than using the <table>. I also had difficulty using <td> and realized that it just doesn't offer the same flexibility as div elements.

    Also, I used ol li::marker to target the numbers in the ordered list. That's how you can make them bold like the original.

    Have a nice day :)

    Marked as helpful
    0
  • Eric Aguayo•945
    @EAguayodevPosted 8 months ago

    Hey everyone! I'm wondering for my solution if the structure of the HTML is done properly with having the content in the right place? Would like feedback on where my code can be not eliminating the horizontal scroll altogether on mobile - I believe the code issues is on my card-layout class and the size of my image. Feedback is appreciated.

    0

Please log in to post a comment

Log in with GitHub

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