Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
1

arafat36

@arafat36145 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Desktop-first using Sass and BEM


    arafat36•145
    Submitted about 5 years ago

    1 comment
  • Desktop-first, Flexbox, BEM, & Sass with simple file structure


    arafat36•145
    Submitted about 5 years ago

    0 comments
  • Responsive design using flexbox and BEM


    arafat36•145
    Submitted about 5 years ago

    0 comments

Latest comments

  • Samuel Adu•1,100
    @samuel-adu
    Submitted about 5 years ago

    Single price grid component using flexbox

    2
    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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub