Perfume product preview page

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center the main on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

  To center  the main on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  In the mobile design give .main-cont a fixed max-width value for a responsive content. max-width: 500px.

  In the media query you only have to give .main-cont a flex-direction: row, the rest are not needed.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Gabriel Teixeira da Silva•50

  @Gabrielbsb21Posted almost 2 years ago

  Oi gabriel, o projeto ficou muito bom, e a responsividade ficou bacana. Tenho apenas algumas considerações:

  1 - Na palavra "perfume" que voce colocou na tag <p> não precisava colocar os espaçamentos e nem a letra maiuscula na "Força bruta", voce pode colocar isso atraves do css mesmo, com as propriedades, text-transform: uppercase e letter-spacing: 3px (por exemplo, a medida aqui vai depender do tanto que voce quer o espacamento entre as letras)

  2 - A acessibilidade da para melhorar tambem, muito bacana voce usar a tag <main>, mas da para a gente melhorar a semantica do html, usando tags section e article.

  3 - O ideial e ter apenas uma tag <h1> por pagina, e se a imagem passa alguma informação colocar a descrição no atributo alt.

  No mais, o projeto ficou show. Parabéns!!!

  Marked as helpful

  1