Recipe Page - HTML - CSS

Community feedback

• 

  Irina Lagutina•640

  @FoxMalder-coder

  Posted 7 months ago

  1. There is a easier way to deal with rem. a) your need set font: size: 62.5% to html --- rem will be 10px; b) set initial (if so) value to body font-size: 1.6rem --- 16px for text-elements and then c) use any rem values inside your's css --- like 240px is 24rem - no hard calculation)))
  2. To make adaptive layout use max-width instead of width (image, table and container). Also don't forget to make images display: block

  21

  Marked as helpful
• 

  hitmorecode•7,540

  @hitmorecode

  Posted 7 months ago

  Congratulations well done. I do have some pointers

  • It's best to have a CSS reset on a page, this is a simple CSS reset.

  * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
  }
  

  • You can remove the margin: 0; on the body.

  .container {
      width: var(--670px);
      background-color: white;
      border-radius: 15px;
      margin-top: 60px;
      margin-left: auto;  // you can remove this
      margin-right: auto; // you can remove this
      padding-bottom: 24px; // change this to just al-round padding
  }
  

  The reason why your page is not responsive is, because you are not using media queries. If you had media queries, you can adjust the page for all different screen sizes.

  • They way you setup the root it's not clear what it is. It might be clear for you for now, but for someone else it's not clear what it is. Give your variables names that make sense.

  :root {
      --16px: 1rem;
      --22px: 1.375rem;
      --32px: 2rem;
      --575px: 35.9375rem;
      --600px: 37.5rem;
      --670px: 41.875rem;
  }
  
  :root {
     --font-size-16: 1rem;
     --font-size-22: 1.375rem;
     --font-size-32: 2rem;
     --width-container-575: 35.9375rem;
     // and so on with this is easier to understand what you are doing
  }
  

  • You didn't add the font style on your page, right now it's using the default font style.

  See if you can fix the responsiveness with media queries. If you need help let me know. I hope you find this helpful.

  Keep it up 👍👌

  11

  Marked as helpful
• 

  Olaniyi-Fatola•70

  @Olaniyi-Fatola

  Posted 7 months ago

  This is absolutely great. For accessibility on different devices, you can use media queries which is "@media (max-width: 768px){}" and then code the what you'll like be different for mobile devices on it. You can check out this video on youtube for better understanding https://youtu.be/k0UVMuCXJtY?si=Y56Xin_U6RjFGdOG

  11

  Marked as helpful