Skip to content
Submitted 7 months ago

Responsive Recipe Page CSS

yinnie•280
@wcyin9
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 sort of happy I was able to make it responsive, but there's lots of areas where I can improve on in terms of the code when it comes to responsive design.

Next time I might try to do mobile first approach, where I code out the mobile view first then expand on the larger sizes.

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

There were two areas that I struggled with:

  1. adding padding within ul/ol, as well as aligning the text. I was able to solve it by using list-style-position: inside and ::marker to decorate the bullet points. In terms of aligning the text, I discovered that position: relative helped me add space between the bullet points and the paragraph. text-indent in combination with padding-left made the paragraph align on the left
  2. responsive sizing on mobile screen. I used fixed sizing in the original code, so I struggled with making it responsive in the mobile view. I solved this by using em/%. Next time I'll try to not depend entirely on given sizes by the Figma design, and use responsive units of measurement instead.
What specific areas of your project would you like help with?

I feel as if my code could be condensed more, but I'm not sure how. There were a lot of repetitiveness that I could do without. In addition, I don't know if I overdid it with the classes and tags in the html.

If there's better approaches to responsiveness than what I wrote, please let me know. I will gladly take criticism from any weak areas you may spot.

Community feedback

  • Bryan Li•3,530
    @Zy8712Posted 7 months ago

    Your site looks pretty good. The main thing I'd change is that I would've used a table for the nutrition section so it would've been easier to format everything. Your code could look something along the lines of this:

    <table>
   <caption>
            The table below shows nutritional values per serving without the additional fillings.
   </caption>
   <tr>
        <th>Calories</th>
        <td>277kcal</td>
   </tr>
   <tr>
        <th>Carbs</th>
        <td>0g</td>
   </tr>
   <tr>
        <th>Protein</th>
        <td>20g</td>
   </tr>
   <tr>
        <th>Fat</th>
        <td>22g</td>
   </tr>
</table>
    Marked as helpful
    1
    yinnie•280
    @wcyin9Posted 7 months ago

    @Zy8712 Thanks so much as always Bryan! All your comments are really helpful and I look forward to them on every solution I post.

    I'm not sure why the table element completely went over my head while I was coding this, but I'm in the process of updating the answer to add it in! The code you provided is also a great reference. Thanks again!

    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