Componente de cartão de visualização do produto

Community feedback

• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 2 months ago

  Looks like a lot of suffering... You should have added flex or grid to main and remove margin from section. You added flex to image div, maybe you just ment main? Also, I think you don't need tag header here.

  1
• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 2 months ago

  Congratulations on coming this far in the challenge. Your styling is great, only the layout needs some work.

  First, center the content on the page with flexbox:

  body {
          font-size: 62.5%;
          background-color: #ffe;
  
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
        }
  

  Next, as @SvitlanaSuslenkova said, add flex to the main:

        main {
          width: 40rem;
          display: flex;
        }
  

  Remove margin and width from container. You may need to fix the image.

        img {
          display: block;
          width: 100%;
        }
        /* Mexendo na div da imagem */
        .imagem {
          /* display: flex;
          justify-content: center; */
          /* margin: 8rem 0 0 0; */
          height: 24.2rem;
          border-radius: 0.5rem 0 0 0.5rem;
          overflow: hidden;
        }
  

  Now this is important. In the media query, don't repeat yourself. If the style doesn't change, don't rewrite in the the media query. Only put what changes in the media query.

        @media screen and (max-width: 480px) {
          main {
            width: 20.1rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          .imagem {
            border-radius: 0.5rem 0.5rem 0 0;
          }
          .Container {
            border-top-right-radius: 0;
            border-bottom-left-radius: 0.5rem;
          }
        }
  

  Now your project looks great!

  0