Design comparison
Solution retrospective
S
What challenges did you encounter, and how did you overcome them?S
What specific areas of your project would you like help with?Placing items on the desktop
Community feedback
- @konji85Posted 6 months ago
hello, good job i saw your design and your code. i have noticed a few things. firstly when you switch to the mobile display there is no margins between the cards. you can add margin to the card(bottom or top and buttom).also it breaks between the 1023px - 700px. i think you could use
@media (max-width: 1024px):
instead of
@media (min-width: 1024px):
secondly, i see that you give each card a class name (yellow-card, cyan-card, blue-card, red-card) which is correct to set the top border color for each but you have replicated the other attributes in each class. instead you could give all a general-name('card' for example)
<div class="card blue-card">
then set the style
.card { border: 1px solid white; padding: 20px; width: 300px; background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
and then a unique name for each card to set the differences like the border color
.cyan-card { border-top: 5px solid var(--cyan); } .yellow-card { border-top: 5px solid var(--yellow); } .red-card { border-top: 5px solid var(--red); } .blue-card { border-top: 5px solid var(--blue); }
for placing the image to the right bottom corner of the card instead of adding padding i think it is possible to use :
align-items:end;
and one last thing you could reduce the width of the card a little to make it much like the design
i wish you happy day
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