Skip to content
Submitted over 3 years ago

Mobile first workflow and CSS Grid

Giovani•90
@giovanibulian
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, guys!

I have a question about the 5-star in the review cards. Let me explain how I did it first:

  • I used a <div> and set the star icon as its background-image.

  • To get 5 stars in total, I set the property background-repeat: space and adjusted the <div>'s dimensions.

  • Now comes the "but": I couldn't work with the spacing to match the design given since a wider <div> would fit more starts into it after a certain breakpoint.

  • And the question: is it possible to give extra spacing using the icon as background or is it only accomplished by adding the star icon itself as an html element and styling it from there?

Many thanks in advance and feedback regarding anything else will be appreciated!

Happy coding!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    @giovanibulian, Wow!!! Your CSS code is amazing and the result is almost looks like the design itself! Congratulations!👏

    0
  • Suraj Singh•0
    @suraj-singh127Posted over 3 years ago

    Everything is nearly pixel perfect! I would really like to know how you adjusted the margins and paddings so perfectly to match it with the original design?

    0
    Giovani•90
    @giovanibulianPosted over 3 years ago

    Hey @suraj-singh127, thanks! 😊

    • First, I get the size of most elements and the spacing between them using a very silly method: I open the design image provided in MS Paint and measure distances by drawing lines 😁.

    • Then, another silly technique: I open the design image in the browser and keep switching between tabs to compare it with mine along the way.

    For this challenge, I basically did the following:

    • I created 3 <div>s to wrap the header, ratings and feedbacks areas.

    • Then I worked with column-gap and row-gap grid properties to space them.

    • Finally, I used align-self and justify-self grid item properties to position both the review and the feedback cards using start, center and end values.

    I hope that's clear enough. If there's anything else, I would gladly try to explain it further.

    0
    Suraj Singh•0
    @suraj-singh127Posted over 3 years ago

    Thanks you for the explanation @giovanibulian and once again, Hats off to your dedication! I hope I am not bothering you, but I would really like to know more about this MS Paint technique you used, seems like a very interesting method to get everything to look exactly similar to the original design!

    0
    Giovani•90
    @giovanibulianPosted over 3 years ago

    Hey @suraj-singh127, sure!

    • First you have to make sure the status bar at the bottom of the window is active (you can show/hide it from the view tab).
    • The status bar shows the cursor position, the size (WxH) of the shape you're drawing and the resolution of the image, all of them in pixels.
    • So you can just pick the line tool for example and draw one to get its dimensions in the status bar! 😁
    0
    Suraj Singh•0
    @suraj-singh127Posted over 3 years ago

    @giovanibulian Thanks for this amazing info! Will definitely try this method in my next challenge.

    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