html and css

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 3 months ago

  Congratulations on completing this challenge! Good use of CSS variables, and well-organized styles. The mobile version is looking good; You can improve it by doing the following:

  Remove margin: 1rem from the body and add it to the container. Change font-family: Fraunces, san-serif; to font-family: Montserrat, san-serif;

  Remove width: 700px from the container. This is unnecessary in mobile as the container will try to take up the width of screen; with the margin added, the container fits nicely and looks great.

  H1 and .main-price both have font-family: Fraunces, serif;

  Remove the media-query with max-width 600px. Now your mobile view looks like the design!

  The desktop view is more problematic, but easily fixed. Try this:

        @media (min-width: 600px) {
          body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* add */
            min-height: 100vh;
          }
  
          .container {
            max-width: 700px;
            /* display: flex; */
            flex-direction: row;
          }
          #product-img {
            /* object-fit: cover; */
            width: 100%;
            border-radius: 1rem 0 0 1rem;
          }
        }
  

  Hope this helps! And keep on coding.

  0