Responsive product preview using scss and bem methodology

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Tiago, well done here! About your question on the screenshot, it's mainly the Fraunces font family at play here (you can compare just the title on the images and see). To fix this, just go to Google Fonts to grab the link again for the Fraunces font faces, but this time uncheck the box for optical view. That should be able to do it!

  Since Adriano gave you some great tips already, the one I'll offer is you can add a bit of margin around the card (1.5rem or 2rem maybe?) so that the sides of the card won't be touching the browser at smaller screen sizes.

  Great job on the whole!

  Marked as helpful

  1

  ---

  

  Tiago José•300

  @tiago-jv0Posted about 2 years ago

  @elaineleung Thanks for the recommendations, i will follow your advices and implement right away !!

  0
• 

  Adriano•38,230

  @AdrianoEscarabotePosted about 2 years ago

  Hello @tiago-jv0, how are you?

  Congratulations on the result of your project, the layout was identical to the example, the figma design helps, right? ahahahahaha

  I have a few tips that I think you will like:

  I noticed that the content in smaller resolutions is not centered, prefer to center the content in all resolutions:

  body { display: flex; align-items: center; justify-content: center; min height: 100vh; }

  The rest is really good!

  Hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Tiago José•300

  @tiago-jv0Posted about 2 years ago

  @AdrianoEscarabote Thanks for the advice, i will implement it.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  OI Tiago, beleza?

  Acabei de olhar sua solução e ficou mto bom o código, achei bacana que vc usou variável pra quase tudo e isso dá um controle enorme caso vc precise mudar algo futuramente.

  Uma coisa que vc pode melhorar, é o height do body pra min-height: 100vh pq desse jeito vc declara que a tela tem que mostrar sempre no mínimo 100 do viewport height e já com height é um valor fixo e não responsivo, diferença mínima, mas em um projeto com mais de um Componente poderia causar algum problema.

  0