Recipe page

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 3 months ago

  Great job on this challenge. Your desktop version looks good. However, when I try to view it on my iphone, it does not look right.

  The problem is you chose to center the content with padding. This is not a good practice as it will look different on different browsers and screen sizes. It is good practice to use either display: grid or flexbox on the parent element. Then your web page will be responsive. Try this:

       body {
          margin: 0;
          /* padding: 300px; */
          background-color: burlywood;
          display: grid;
          place-content: center;
        }
  
        .content {
          max-width: 600px;
          background-color: white;
          padding: 0px 20px;
          font-family: "Outfit", sans-serif;
          margin: 10px;
          border-radius: 10px;
        }
  

  (You may also have to set a width on the content.) Now everything looks right on smaller screens.

  0