Design comparison
SolutionDesign
Solution retrospective
I couldn't make the images in the cards to show behind the blue background, would very mush appreciate if anyone can teach me how to
Community feedback
- @gwtpraveenPosted over 2 years ago
good job completing the challenge!
to fix the issue,
.card .data { position: relative; z-index: 4; }
You do this because you set the z-index: 3 of the class icon and must set position relative because the z-index has no effect on the element if it is not positioned.
i think this will help!
Marked as helpful0 - @abd-2023Posted over 2 years ago
Hey @Andes I have some pointers for you :
- I think you are overusing flex unncessarily try to reduce that like in main and .character-card there was no need
- I would suggest use background color on on body so that the whole web page has color and not avoid part which looks white and very odd from the rest of the page.
- Remember try to use flex on body and center things(vertically and horizontally) on the page whenever there's enough space remaning.
- Try to increase font size for text in footer and left sidebar.
- I think there's a lot of space b/w number and 'hrs' text and it's not need IMO and please focus on spacing between other elements too as specified by the design.
- there's no need to put a in p tag you can just you a independently.
- if you want to put 'icon' elements behing 'data' you can increase z-index of 'data' elements which you have done but haven't used position on it which is why it didn't work and also there's no need for div here img will work fine on its own. Hope you find these comments useful.
0
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