Order summary card with flaxbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Fala Mateus, beleza? Parabéns pela sua solução.

  Acabei de ver aqui e você reproduziu o design certinho.

  Só tem um problema com sua solução, ela não está responsiva devido ao grande número de elementos que você colocou width ao invés de max-width e ai o container se comporta como um block fix. Pra resolver esse problema você tem que ajustar todos os width pra max width permitindo o container a diminuir quando a janela se ajusta.

  Se você arrumar isso nem vai precisar de nenhum media query, o proprio container se ajusta sozinho.

  Se você quiser ver minha solução pra saber como vai ficar depois do ajuste responsivo, tá aqui o link: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id

  Espero ter ajudado, continue codando bro

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @correlucas Thank you very much, I will give a solution and my solution

  1
• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi @Theuz1nh0,

  You did a very good job, congrats on that, I think it would be easier for you to make the component responsive if you choose between rem or em and avoid using px, I personally use rem because their base font-size is root font-size which is 16px, and based on that I can convert all my px units into rems, I would suggest:

  • In smaller screens give the component a margin so the browser doesn't overflow the content
  • Use a media query to make the component and its elements smaller on small screen devices.

  Keep it up...

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  Hi @fatlindshehu, first thank you very much for your feedback.

  • I did this I used the rem and em measurements in almost all my measurements (except for the edge measurements), but what I found strange is that when I went to the mobile version I had to redo these values, as it was a little different than expected. So, sort of in the media query, I had to change just a few measurements.
  • About giving margin on smaller screens I had completely forgotten, and I even found it strange that when I was leaving the screen small to test, it would "eat" my project. I will do what you said, thank you very much.

  0

  

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  @Theuz1nh0 You should choose between rem or em but not both, rem uses as a base font-size the root font-size (16) meanwhile em base font-size is its parent font-size (which in some cases can be challenging to know where is cascading from).

  Keep it up bro :)

  1

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @fatlindshehu So I did like this... The width of my parent element which is the main tag I put it in em and the rest of the measures, minus the font-size measures I put rem . Is what I did right? Or even the font size measurements need to be in rem too?

  0

  

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  @Theuz1nh0 If you choose rem then everything is supposed to be in rem that's the proper way of doing that, in the case of image width/height then the percentage is used.

  1

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @fatlindshehu got it, thank you

  0
• 

  fausto-machava•110

  @fausto-machavaPosted over 2 years ago

  Verry well done, its amazing!

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @fausto-machava thank you so much

  0
• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge!

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @mubizzy Thank you very much

  0