
Design comparison
Solution retrospective
would love any feedback on how I can improve my HTML and CSS code further or simplify it.
Community feedback
- P@MihailoSparic01Posted 8 days ago
Great work, Ahmed!
I have a few suggestions:
In your media queries, try using em units instead of pixels (not rems, not px, but ems). It’s a more flexible approach.
For images, use max-width: 100%; instead of width: 100%;. This helps maintain their aspect ratio while ensuring they don’t exceed the container width.
When starting a component in one layout style, like using flex for an image gallery, it’s best to finish it that way as well. Mixing flex on desktop and grid in media queries isn’t considered good practice.
Start considering adding media queries for larger screens. I can’t see the background image as I should at the beginning. Here's an example of how it looks on ultrawide monitor: https://imgur.com/a/8EK4H2X
The following code will fix that:
@media screen and (min-width: 120em) { .yourClass { background-repeat: no-repeat, no-repeat; background-position-x: 20%, 80%; background-position-y: 50%, 50%; } } It will look something like this:
https://imgur.com/a/tgvErJZ
The footer is responsive on tablets, but not on mobile. There seems to be a small bug somewhere—check that out. It shouldn’t be too difficult for you to find and fix.
Everything else looks excellent overall. Keep up the great work! 😎
Marked as helpful0P@QS3HPosted 8 days ago@MihailoSparic01 Thanks a lot for the great suggestions. :) I will look that up and improve my code further.
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