Devisetti Teja• 530
@Teja54
Posted
This comment was deleted
1
Pete• 150
@petewk
Posted
@Teja54 Thank you!
0
Design comparison
Solution retrospective
This was a fun one to build, using a lot of bootstrap grids to sort out responsive layouts.
I struggled a bit with placement of some of the items, for example aligning the up and down figures on the smaller cards to the bottom right while staying inline with the numbers in the bottom left, I had to do this just by adding a right margin the to bottom left numbers which doesn't quite leave them in the right places. The same goes for the Theme toggle switch at the top of the page.
Also any suggestions on an efficient way to change the themes would be welcome, especially if there's a way to toggle a single class for the whole document to see the change? Overall the effect turned out fine, especially like the transition between the themese
Community feedback
Raymart Pamplona• 16,090
@pikapikamart
Posted
Hey, great work on this one. Layout is good both in desktop and mobile. Resizes well when reaching the mobile view.
Though as I resize it, I noticed at around 1200px going down. The 3rd and last bottom cards. The text gets wrapped and now the content is out of the container. You might want to check that one out.
Regarding your query. To solve that issue, you can just add
align-items: flex-end;
display: flex;
justify-content: space-between;
on your small .div to make the text well separated without having to use margins. It is responsive in that state even when the cards gets smaller or wider.
Overall, good work on this one, if you want another transition to the cards, you can check out my solution :> I used some other tricks on that^^
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