Skip to content
Submitted over 3 years ago

Single grid component

Angelo Barbarulo•280
@Jorahhh
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Used Grid for this challenge for the first time.

Really though for me, and a I don't even know if it's a good code or if I could do It better. Any advice on how do it better would be appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Arthur Roberts•410
    @arfarobs

    Hey, Angelo. Great job on learning the basics of CSS Grid. I have a few suggestions for you, mate.

    1. If I was to do this project, I would put the line "join our community" as an <h1> heading. This will avoid the accessibility error in the report.

    2. To fix the issue with the media query, you can change line 126 from this: @media (max-width: 1600px) and (min-width: 800px){ to this: @media (min-width: 800px){ By doing this you are saying that you want your media query to work on all screen sizes with a width of 800px+.

    Marked as helpful
  • Angelo Barbarulo•280
    @Jorahhh

    Ah! I think I did some mistakes in the @media queries with screen side dimensions.

    I put wrong min-max widths, 'cause from my pc (MacBook Air so its 1280px x 800px, I guess) it seems fine, but from others pc's not.

    Basically, on a bigger screen I see what I should see on a mobile device.

    Any suggestion on this?

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord