Recipe Page using HTML and CSS

Community feedback

• 

  Katherine Lim•140

  @katherin467

  Posted 4 months ago

  Nice job! Your solution looks great, particularly the visual hierarchy and overall spacing of all the elements. I did notice that on smaller screens, it doesn't exactly match the given mobile design in terms of the outer padding, border radius, and header image. You could add a bit to your media query like this:

  @media (max-width: 375px) {
    body { padding: 0; } /* delete padding outside recipe */
    .recipe-card { border-radius: 0; }
    .recipe-content { padding-top: 0; } /* image goes to very top*/
    .recipe-image { 
      border-radius: 0; 
      /* increase image width based on padding of .recipe-content, which is 24px */
      width: calc(100% + 48px); 
      margin-left: -24px; /* shift image left */
    }
  }
  

  Admittedly this feels a bit hacky and I'm not sure if it's the correct way to go, this is just the solution I arrived at. Hope this helps, and feel free to let me know if this is bad practice 😆

  00

  Marked as helpful