responsive product page using html and css
Design comparison
Solution retrospective
hello, this is my first time trying a challenge here was a little difficult. any feedback is welcomed and thank you.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Hicham Maachou, congratulations for your first solution! π Welcome to the Frontend Mentor Coding Community!
I did some fixes to your code:
The correct size for the container is
max-width: 900px
(to have the correct size and also make it responsive).product-container { background-color: hsl(0, 0%, 100%); border-radius: 10px; /* height: 70%; */ max-width: 900px; /* width: 60%; */ overflow: hidden; display: flex; justify-content: space-between; }
Note that there's no need to use
height
here, because since you set aheight
for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set theheight
the container height comes from the elements, its paddings and height.βοΈ I hope this helps you and happy coding!
Marked as helpful1@hichammaachouPosted about 2 years ago@correlucas thank you sm that was really helpful!
1 - @AdrianoEscarabotePosted about 2 years ago
Hello @hichammaachou, how are you?
Welcome to the front-end mentor community. I really liked the result of your project, you did a great job in this challenge, but I have some tips that I think you will like:
1- Document should have one main landmark, you could have put everything inside the
main
tag click hereI noticed that the container was growing due to the relative measurement units, always try to use fixed measurement units at higher resolutions, and you can make the change using an emdia query for the relative measurement unit, which is better at lower resolutions.
.product-container { height: 500px; width: 700px; }
The rest is great! Hope it helps... π
Marked as helpful1@hichammaachouPosted about 2 years ago@AdrianoEscarabote thank you so much for feedback, very helpful!
0@AdrianoEscarabotePosted about 2 years ago@hichammaachou no problem man, keep coding π
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