Design comparison
Solution retrospective
Hello, Frontend Mentor community! This is my solution to the Base Apparel challenge✨
The main image does not seem to resize properly based on screen size. I'd appreciate any advice on working on images, rendering, and positioning, including cropping/ trimming images🖼
Wishing peace🙏 Happy coding!
Community feedback
- @kem522Posted over 2 years ago
Hi! Really good job - so close to the designs!
I have a couple of pieces for advice in your CSS (although I can't help 100% with your image issues, they can often be a bit fiddly!):
-
I see you use IDs a lot in order to apply styles, this is generally not considered best practice due to their very high specificity and are best reserved for targeting elements in JavaScript, you can read more about that here
-
I also noticed you added
height
to a number of your elements. More often than not it is better (and easier for you in the long run) to create height and space by using padding and margins instead of an explicit height.
Keep up the good work!
Marked as helpful1@TSune-webPosted over 2 years agoThank you @kem522!
I really appreciate your critical and helpful advice!
About the specificity, I'm aware of it but realised that I need to be consistent with the use of selectors. I'm seeking ways to get better at styling and positioning, and your information really helps.
Thank you!
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