Recipe page

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 2 months ago

  Congratulations on finishing this challenge. Your desktop version looks great @1440px, and I love the way you have organized the html into sections using comments. That makes it super easy to read and maintain.

  However, when I tried to view the web page on my iphone, it was a mess. This is because you centered your content using margins and padding, which works great for the desktop version, but does not work at all on mobile. Centering content on the page is a critical skill for these challenges. This article explains the different ways to center content.

  When I studied your web page, I was able to fix the mobile problem by setting a width of 70rem on the container, and using flexbox to center it.

  body {
    background-color: antiquewhite;
    /* add */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
  }
  
  .container {
    background-color: #fff;
    /* margin: 100px; */
    padding: 50px;
    border-radius: 20px;
    /* add */
    width: 70rem;
  }
  

  Then I added a media query to tidy things up a bit for mobile.

  @media screen and (max-width: 400px) {
    .container {
      width: 85%;
      padding: 25px;
    }
  }
  

  You did a great job on coloring the list markers; many people miss that detail. However, the stats under the Nutrition-type are also a brown color and bold font. What you need to do is target "the list item of the ul which is the second child of Nutrition-type."

  .Nutrition-type ul:nth-child(2) li {
    font-weight: bold;
    color: rgb(109, 26, 26);
  }
  

  Also, the Preparation div has a faint background color:

  .Preparation {
    background-color: rgb(255, 247, 251);
    padding: 5px 10px;
  }
  

  Try it out, see what you think; and keep on coding! Good luck on your 100 day challenge,

  0

  ---

  

  Nobin Al Hussain•30

  @nobinalhussainPosted 2 months ago

  Thank you so much for your detailed feedback! I really appreciate the time you took to review my work and provide such insightful suggestions. I'm glad you liked the desktop version and the organization of my HTML. Your tips for improving the mobile version are incredibly helpful, especially the use of Flexbox and media queries. I'll definitely apply these changes to make the page more responsive.

  Also, thank you for pointing out the details about coloring the list markers and adjusting the stats under the Nutrition-type. Your code examples are clear and will be a great help in refining my project.

  Thanks again for your encouragement and support as I continue with the 100-day challenge! @beowulf1958

  0