Vanza Setia• 27,795
@vanzasetia
Posted
@giovanibulian, Wow!!! Your CSS code is amazing and the result is almost looks like the design itself! Congratulations!👏
0
Design comparison
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 itsbackground-image. -
To get 5 stars in total, I set the property
background-repeat: spaceand 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
Suraj Singh• 0
@suraj-singh127
Posted
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
@giovanibulian
Posted
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-gapandrow-gapgrid properties to space them. -
Finally, I used
align-selfandjustify-selfgrid item properties to position both the review and the feedback cards usingstart,centerandendvalues.
I hope that's clear enough. If there's anything else, I would gladly try to explain it further.
0
Suraj Singh• 0
@suraj-singh127
Posted
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
@giovanibulian
Posted
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-singh127
Posted
@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