Skip to content
Submitted over 3 years ago

Single Price Grid Component using CSS Grid & Media Queries

Skyz Walker•1,045
@Skyz03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

It was a not getting the best ways to make it responsive and made it as fluid as possible... if anyone have any best practices and recommendation to take it to the next level it will be highly appreciated. Thanks in Advance 👍😁

Community feedback

  • TechnoSolution•125
    @MuhammadLaeeqPosted over 3 years ago

    Nice effort ! Just fix the button and apply the border on the box

    1
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @MuhammadLaeeq Thanks a lot... Will surely look at this.

    0
  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Sky! 👋

    Well done on this challenge, you're going like crazy recently! Here's a few things I'd suggest you to take a look at:

    • Use <ul> unordered list for why-section-description instead of paragraphs. Lists allow web developers to group a set of related items in lists.

    Keep up the good work! 💪

    1
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @tediko Thanks ... I was thinking in a similar way, but when I implemented it using UL and Li. The bullet dots were appearing. Is there a way to vanish those out as we don't have them in design ? 😃

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    well here are a few things to change

    1. The overall design does not have the border radius on the corners
    2. Instead of setting button size with padding set it with a height and a width so it keeps it shape and does not make your text go to two lines in mobile view

    otherwise you have a good start on this project

    1
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @palgramming thanks a lot ... Will surely update this one. Your 2nd point it great.

    1

Please log in to post a comment

Log in with GitHub

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