Recipe page

Community feedback

• 

  KapteynUniverse•1,480

  @KapteynUniversePosted about 1 month ago

  I think you can put background-color: var(--stone100) to body at the start,
  delete and (max-width: 768px) from the first media and just use

  @media screen and (width > 375px) {
    #wrapper {
      max-width: 616px;
      padding: 2.5rem;
      margin: 8rem auto;
      border-radius: 1.5rem;
    }
  
    main {
      padding: 2.5rem 0 0 0;
    }
    h1 {
      font-size: 2.5rem;
    }
  }
  
  @media screen and (width > 768px) {
    #wrapper {
      max-width: 736px;
    }
  }
  

  Also need this before media queries so recipe can have a background below 375px screen size

  #wrapper {
    background: var(--white);
  }
  

  I recommend you to use em and rem units instead of pixels, classes instead of ids.

  Pixels are fixed sizes and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible.

  I don't know if there is another reason but Ids should be unique if you attach a style to an id, you won't be able to reuse it.

  0