Single price grid component using flexbox

Community feedback

• 

  Juan Daniel Martínez•500

  @juandadev

  Posted about 5 years ago

  Hello Samuel! Your solutions look fine, but there's a little thing you can change:

  • Need to work with the responsive design of your page, maybe with your screen resolution looks fine, but in other devices doesn't look good, especially with the container's height. You may want to change the .main-header .primary .secondary height property to auto and give more padding to these containers too, I recommend you to use relative values (%, rem, em) instead of absolute values (10px). Give it a try

  • In case you still have some trouble, the normalize.css file could affect too. The most simple way to format styles it's adding in the * selector margin: 0; padding: 0; and box-sizing: border-box;

  Happy coding! 🤓

  21
• 

  arafat36•145

  @arafat36

  Posted about 5 years ago

  Hi Samuel, Well done for this project! Your design is close to the original, with a few adjustments it'll hopefully be identical.

  I noticed the space inside the boxes in your initial upload. This is because of the container growing. Set the flex: 0. Also, increase the width of the container from 50% to 55% (you can test different values to get it right)

  Secondly, increase the padding slightly in each of the boxes. something like padding: 3em 1.6em; (again, you can test different values to get it right)

  @media (min-width: 678px) { .container { /* width: 50%; */ width: 55%; flex: 0; } }

  .main-header, .primary, .secondary { /* padding: 15px 15px; */ padding: 3em 1.6em; }

  Lastly, avoid using fixed measurements like pixels. It's better to use relative units like percentages, em, vh, vw, etc. because creating a responsive design then becomes easier.

  That's all I had to say :) Good luck with the next project!

  /Arafat

  11