Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Responsive Recipe Page using Flexbox and a Mobile-First Approach

Linda Jensen•80
@lindajensen
A solution to the Recipe page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I'm not sure I'm proud of anything in this project. I struggled a lot and I couldn't even get it right. I mean it looks fine I think, but it doesn't look 100% the way it's suppose to in mobile view (the image isn't right) and the table isn't completely right either. But this was my first time working with tables and like I'm guessing that's what it was suppose to be because it says "The table below shows [...]", but I couldn't get it to look just right.

I hadto redo the challenge because the first time I created it desktop-first but that did not pan out so I guess if I was to redo it I would have followed my gut and used a mobile-first workflow to begin with.

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

I encountered a lot and it really made me feel like I'm not good enough and that maybe I should do something else with my time. Sometimes I'm kind of hard on myself and I mean I haven't even been coding for more than 9 months. But the first challenge I encountered was making the site responsive when going from desktop-first so I just commented out all my CSS and did it mobile-first and then reusing the code that still worked.

The second issue was the image in mobile view. No matter what I did I couldn't get it right. I didn't really overcome it. I just decided that I needed to move on. Looking back at it I'm realizing that I could have posted a question on Discord so I think that's what I'll do next time.

The third challenge was the table. And I didn't overcome that either. I mean I think made it look alright but it's not 100% accurate. So same thing here, next time I'll post and ask about it on Discord.

What specific areas of your project would you like help with?
  1. The image: What was the HTML and CSS suppose to look like? How could I have made it look the way it does in the design?

  2. The table at the bottom of the page: Was it suppose to be a table? I'm thinking yes because of the use of semantic HTML, but is that correct? Could I have styled it differently? Where did I go wrong?

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Darek•140
    @DarekRepos
    Posted over 1 year ago

    I think you did great job! Sometimes, the solution isn't straightforward. Think of it as a journey - there's always something to learn. I've struggled with similar issues myself.

    Don't get discouraged! Solving problems can be complex. If you want improve styling tables, check out this link for ideas on handling tables with borders: table-with-borders-only-on-the-inside

    I played with your css solution in the firefox browser using style editor. With this image just comment margin and padding on your wrapper .card (this is container for all elements, you have different padding's on the child element so you have to solve this).

    .card {
        /*! margin: 0 auto; */
        background-color: var(--white);
      /*padding: 0 1.875rem; */
    }
    

    Then you see that the image behave similar to the design on mobile devices.

    Moreover since all your content (without image) are in section elements ( or main tag element) you can simply add padding to this element. You can remove this padding in media query to disable padding on larger and desktop devices.

    section {
      padding-inline: 2rem; /* Default padding for all screens */
    }
    
    @media (min-width: 530px) {
      section {
        padding-inline: 0; /* Remove default padding on larger screens */
      }
    }
    

    This is just an example you can use you main element instead of section. You can try it by yourself and play more with this solution. I hope you find this helpful.

    Marked as helpful
  • Saeed Bin Mizan•80
    @BluffSet7340
    Posted over 1 year ago
    • I did my solution desktop-first then mobile. So my feedback is given from a desktop-first perspective, then adding media queries for mobile screen sizes.
    1. The left and right paddings affect the image as well. A not-pseudo selector that exludes the images from being affected should work well.

    2. Use a media query to get rid of the top margin for the image.

    3. Super minor but you can reduce the font-weights for the titles in nutmeg (Ingredients, Instructions, Nutrition).

    4. For the screen size 320px, I noticed that by reducing the padding-left of the .raspberry selector fixes the issue of the table going out of bounds. It feels like a dirty solution but seems to work.

    5. You'll have to repeat the above steps for various mobile screen sizes.

    6. Also minor but you could increase the padding of the "card" <div> element to make it look more like the original

    7. That's all the feedback I have, everything else matches the original quite well.

    8. In my social media links solution, the best feedback I got was being told that rather than focusing on the exactness of the solution, it's better to focus on responsiveness, the value of certain units, and differing layout mechanisms. I think this applies here as well.

    Hope the above is helpful!

  • Rahul•30
    @c99rahul
    Posted over 1 year ago

    Not bad at all.

    Coding after 9-10 months is a tough job, and getting into a designer-coder mindset takes some time. Since I'm accustomed to working with CSS and mobile-first workflow, here are a couple of points from my side that I hope could help you a bit:

    • Instead of setting padding on the parent container, you may use individual wrappers for each block i.e. the image and the content and then apply padding on them as required in the mobile and desktop views.
    • I agree that the table part is tricky here. Upon setting wider horizontal padding to table cells, I always had the cells shifting their next siblings which didn't look like the expected design. Had to perform some "tweaks" to get it right.

    Keep improving, that's the only way to grow.

    Cheers!

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub