Skip to content
Submitted about 4 years ago

Mobile-first, CSS Grid Price Component

Shivam•520
@shivjoshi1996
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

Hi everyone,

This was my first time using grid outside of tutorials, so I would be grateful for any feedback on how I have used it.

I also had some issues which I hope some people can help me out with:

  1. Aligning the text / button as shown in design.

At first, I added display:flex to the card container, and then justify-content: space around, so that the text would space out evenly. However, I found that once I did this, I couldn't fine-tune the alignment for some of the items which needed to be closer together e.g. The h2 and p in the top box, which are closer together.

  1. The use of Widths and Heights

I felt like with this challenge, since the whole component was centred in the middle, I had some issues with making the container size up correctly on different mobile sizes without sections getting cut off. Hence why on mobile, my solution doesn't look exactly like the design, as when I increased the padding on elements, the container would start getting cut off on smaller widths. If anyone can look at what I've done and tell me some improvements, that would be great.

  1. White line at the bottom of the component, due to the box shadow.

I've added a box shadow on the component, but when I add it, I see a white line at the bottom of the component and I'm not sure why. Does anyone know?

I would also appreciate any other general feedback.

Thanks!

Community feedback

  • Yemisrach•1,430
    @Yemisrach15Posted about 4 years ago

    Hey Shivam. It might be late to give feedback but here's what I found for your third question.

    I don't think the white line is due to the box-shadow rather because of the code below.

    .price-component {
    height: 600px; 
}

    Since you have set a fixed height to .price-component, any leftover height is shown as white line below. Also adding border-raidus: 5px to .price-component instead of individual cards might be better in my opinion. I've checked that deleting the above code solves the problem. Hope this helps😊

    2
    Shivam•520
    @shivjoshi1996Posted about 4 years ago

    @Yemisrach15 Great! Thank you so much for looking into this for me and providing the solution. Much appreciated!

    0
  • Anna Leigh•5,135
    @brasspetalsPosted about 4 years ago

    Hi Shivam! While I'm no expert on grid, I might be able to help with your questions.

    1. Using justify-content: space-between should allow you to adjust the margins of the text elements easier.

    2. Maybe you could try playing around with the wrapper padding ?

    3. If you set your border-radius on the price-component div and also add overflow: hidden, it should get rid of those little white corners. This also should save you from having to add borders to the individual boxes.

    2
    Shivam•520
    @shivjoshi1996Posted about 4 years ago

    @brasspetals Thanks a lot for the feedback! I will try these things out!

    0

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