Recipe Page

Community feedback

• 

  Joseph Reyes•440

  @JreyIVPosted 7 months ago

  Hi Anjie, You did a great job on this project

  I noticed that some padding was a little off. A padding of 2rem would've sufficed and would have wrapped around the whole thing which would have made it closer to the design.

  one tip i have for you when it comes to responsiveness is to try to keep media queries to a minimum. Try to have your design be responsive without using too much media query. One way to do that, for example, is by not setting width and height to fixed values. instead, try using max-width and max-height on images and wrappers. I used this for my image max-width: 100%; max-height: auto; and this for my wrapper/container max-width: 46rem; in doing so, you don't have to worry about sizing because it will grow and shrink with the screen.

  in the end, this is all the media query i used:

  @media (max-width: 767px) {
    .card-wrapper {
      margin-block: 0;
      min-height: 100vh;
      border-radius: 0;
      padding: 1rem;
      display: flex;
      flex-direction: column;
    }
  
    .recipe-image {
      margin: -1rem -1rem;
    }
  
    img {
      width: 100%;
      border-radius: 0;
      padding: 0;
      margin: 0;
    }
  }
  

  keeping the media query to a minimum and letting the rest of your code be responsive will make things easier for you in the long run.

  as for your redundancies, i think that i have the same problem. one tip i can give you is to make custom variables in the beginning. like this:

  :root {
    --ff-accent: "Young Serif", serif;
    --ff-primary: "Outfit", sans-serif;
  
    --fw-light: 400;
    --fw-normal: 600;
    --fw-bold: 700;
  
    --fs-normal: 1rem;
  
    --clr-nutmeg: hsl(14, 45%, 36%);
    --clr-dark-raspberry: hsl(332, 51%, 32%);
  
    --clr-white: hsl(0, 0%, 100%);
    --clr-rose-white: hsl(330, 100%, 98%);
    --clr-background: hsl(30, 54%, 90%);
    --clr-light-grey: hsl(30, 18%, 87%);
    --clr-wenge-brown: hsl(30, 10%, 34%);
    --clr-dark-charcoal: hsl(24, 5%, 18%);
  }
  

  this makes it so that you don't have to do that whole hsl() thing everytime and it makes it easier to change multiple colors, font sizes, font weights, etc later on.

  great job and good luck

  Marked as helpful

  0

  ---

  

  Anjelica•110

  @Anjie-MFPosted 7 months ago

  Thanks for the feedback. I am going create a seperate branch to try out your suggestions. Much appreciated!@JreyIV

  0