Responsive Recipe Page using Flexbox and a Mobile-First Approach

Community feedback

• 

  Darek•140

  @DarekReposPosted 8 months 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

  0

  ---

  

  Linda Jensen•80

  @lindajensenPosted 8 months ago

  Thank you so much for all the feedback and the kind words. I really needed to hear that @DarekRepos

  0
• 

  Saeed Bin Mizan•80

  @BluffSet7340Posted 8 months 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!

  0
• 

  P

  Rahul•30

  @c99rahulPosted 8 months 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!

  0