Respponsive product preview card using mobile-first approach
Design comparison
Solution retrospective
I am proud of completing this challenge. I tried to create similarly as close as possible to the design. However I think there is a better solution than mine. I practiced media query and flexbox to make it responsive. Next time I want to use grid.
What challenges did you encounter, and how did you overcome them?When I was doing this challenge I struggled to make text look similar to the design at first. I tried to limit line of the text using padding and margin but it didn't help then I read web dev about typography and found out solution to overcome this issue by using
max-inline-size.
When I was checking responsivenes of my solutoion by devTools I noticed horizontal scroll show up.If you know how to resolve it let me know.
Community feedback
- @StroudyPosted about 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
- It would be better to add the
<img>
to your HTML and then style it with something like this,
.product__image { object-fit: cover; width: 100%; height: 100%; aspect-ratio: 2 / 3; }
-
Then set the
width
andheight
for the<img>
it helps the page load faster and prevents content from jumping around as the image loads. This is good for performance and improves user experience. However, if your image needs to keep a consistent shape (aspect ratio) across different screen sizes, it's better to use the CSSaspect-ratio
property instead. -
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing. -
Using
position: absolute
is not always best practice because it removes elements from the normal document flow, making layouts harder to manage and potentially causing overlap or misalignment on different screen sizes. Instead, use flexible layout techniques like CSS Grid or Flexbox for more responsive and maintainable designs.
You have done so many things correctly with this solution, Keep building on your knowledge, and remember, every step forward is progress. You’re on the right track, and you’re doing great. Have an awesome day and happy coding! 😊
0@ratsagiPosted about 2 months ago@Stroudy, I figured out that it was because of the object-fit: property so I decided to use picture instead of background-image.
1@StroudyPosted about 2 months ago@ratsagi, Good stuff, Its good to see you figuring it out and not just copying and pasting, I hope I pointed you some where in the right direction and was helpful. You’re doing an amazing job, so keep up the hard work. Remember, every line of code is a step closer to mastery. Stay motivated and keep coding! 🎉
0 - It would be better to add the
- @SvitlanaSuslenkovaPosted about 2 months ago
Please, try this code, I think, it could help against the scroll.
*, :after, :before, body { margin: 0; padding: 0;}
But, please, write it in the beginnig of your style.css
Hope you found this comment helpful :)
0@ratsagiPosted about 2 months ago@SvitlanaSuslenkova, Unfortunately it didn't help. I use modern css reset of Josh Comeau so this line of code must be already there.
0@SvitlanaSuslenkovaPosted about 2 months ago@ratsagi hm, I don't see padding: 0 in body styles, but ok, I won't argue. You can just move you @media point to 31rem
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