Design comparison
Solution retrospective
In this challenge I made use of pseudo elements and background-image/attachment/etc. The only issue I had was adding a margin to the rating stars individually. I didn't want to mark them up in html with another div so I decided to let them in this state.
Is there a way to individually style ::before
elements?
Community feedback
- @ospopPosted almost 4 years ago
Hi!
This is a better way to style the stars individually but since there is no content inside the element it is not possible to align the stars with the text and it also removes the ability of moving them beneath the text on media query. This way the stars can't respond to width changes.
I updated the media queries though, you were right about the threshold. I only looked for the name and status of each person not to move on 2 rows each, I try to avoid having 4 rows of text with one word each.
Thanks for the input!
1 - @janegcaPosted almost 4 years ago
Hi popescudragos, overall your design looks pretty good although you may want to lower the threshold on @media query so the larger layout kicks in earlier, maybe around 900px or so.
You could load the stars as background images which would give you some control over sizing and spacing. Here's a quick example of what might work:
p { position: relative; left: 6%; }
p::before { content: " "; position: absolute; background-image: url(../images/icon-star.svg), url(../images/icon-star.svg), url(../images/icon-star.svg); background-size: 17px 16px; background-position-x: 5px, 30px, 55px; background-repeat: no-repeat; width: 100%; height: 100%; left: -5%; }
Hope that's of some help. Nice job.
1
Please log in to post a comment
Log in with GitHubJoin 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