Skip to content
OverviewSolutions
3
Comments
1
arafat36
@arafat36

All comments

  • 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