Single price grid component using flexbox

Community feedback

• 

  Juan Daniel Martínez•470

  @juandadevPosted over 4 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! 🤓

  2

  ---

  

  P

  Samuel Adu•990

  @samuel-aduPosted over 4 years ago

  @Juandamartn

  Thank you Juan for your prompt feedback, i already started working on a fix by giving the container a height property, please see my new result.

  I would give your feedback a try too to see the result.

  Also i would start implementing this suggestion in all my codes. " * selector margin: 0; padding: 0; and box-sizing: border-box;"

  0
• 

  arafat36•145

  @arafat36Posted over 4 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

  1

  ---

  

  P

  Samuel Adu•990

  @samuel-aduPosted over 4 years ago

  @arafat36 Hi Arafat, thank you for your feedback, I would implement the suggestions.

  0