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

Shahbaaz Athhar

@Shahbaaz92India370 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

  • Notifications Page Main Responsive


    P
    Shahbaaz Athhar•370
    Submitted about 1 year ago

    0 comments
  • Fylo data storage component


    P
    Shahbaaz Athhar•370
    Submitted about 1 year ago

    0 comments
  • Single price grid component


    P
    Shahbaaz Athhar•370
    Submitted about 1 year ago

    0 comments
  • Testimonials grid section using Grid

    #accessibility

    P
    Shahbaaz Athhar•370
    Submitted over 1 year ago

    0 comments
  • Huddle landing page @media-queries


    P
    Shahbaaz Athhar•370
    Submitted over 1 year ago

    0 comments
  • Social Links Profile Main


    P
    Shahbaaz Athhar•370
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • Omowunmi Kamiludeen•120
    @Omowunmikamil
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    First, I'm proud of completing the challenge. After completing the challenge, I gained beautiful knowledge of CSS variables and pseudo-class selectors.

    What challenges did you encounter, and how did you overcome them?

    Getting the layout to match the provided design took some time, but practice makes perfect.

    What specific areas of your project would you like help with?

    If I want to use CSS Grid instead of Flexbox, how can I achieve this?

    Single price grid component

    1
    P
    Shahbaaz Athhar•370
    @Shahbaaz92
    Posted over 1 year ago

    Hello, The site was good but do not use % or rem for paddings and margins instead use ems or px for paddings/margins and reduce the vertical gap between the body and the container. Let the width of the first article(first child of the main container) and section (second child of the main container) be 100% of the main container, that way it will be responsive. In the section element after the display: flex use justify-content: space- evenly, so that they are spaced evenly.

    To use grid .flex-container{ display:grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, auto) } .flex-container article{ grid-row: 1/-1; } .flex-container section{ grid-row: 1/-1; #here you can use flexbox instead of grid for the children }

    Marked as helpful
Frontend Mentor logo

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

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

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