Product Preview Card Component

Community feedback

• 

  João Marcos Donizetti Rodrigues•30

  @jmdonizettiPosted about 2 years ago

  Tenta utilizar um padding com ele vc consegue colocar a imagem no centro e um pouco mais para esquerda, vai ficar igual o desafio, acredito que um padding-top: 150px; e um padding-rigth: 50px; deva resolver para centralizar todo o seu conteúdo, fiz usando o inspecionar do google no seu projeto e deu certo

  Marked as helpful

  0
• 

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  To center items to the center of the screen use these code...u can use 90vh if u want (viewport height) .container {   display: flex;   min-height: 100vh;   flex-direction: column;   justify-content: center;   align-items: center;} It means whole content to the right(center) and its items to the center...

  Marked as helpful

  0
• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  Hmmm.... my guess is maybe try setting initial vw/vw in your index.css to establish context for the browser (body{height:100vh;width:100vw}) but that might be default browser settings anyways in which case, my guess is there is some tailwind-ing overwriting other areas. I didn't know about the place-items:center but on my crude trial, it placed the one div card I had in the center. Nice job on rest of it. Looks like you had good practice in breaking it all down into components. Good stuff!

  Marked as helpful

  0

  ---

  

  JJ Vega•110

  @jjvega86Posted about 2 years ago

  @jgreen721 Excellent feedback. Tried setting the initial vw/vh and it helped but jacked up my breakpoints, so I think you're correct that there's some Tailwind related tomfoolery afoot. Going to continue to experiment on my next challenge and see if I can't address the weirdness.

  1