Design comparison
Solution retrospective
It is working!
What challenges did you encounter, and how did you overcome them?A bit difficulties with media query and I had it fixed by a professional
What specific areas of your project would you like help with?I think the padding of the container when the media query is 375px is wrong. If you can fix, please feel free to fix it. Thanks a lot!
Community feedback
- @0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
PiCTURE TAG 📸:
- Looks like you're currently using single image for both Desktop & Mobile devices,
<img src="images/image-product-desktop.jpg" alt="Product image" draggable="false"> .left-container img { width: 100%; height: 100%; user-select: none; object-fit: cover; } @media screen and (max-width: 375px) { .left-container img { width: 100%; height: auto; aspect-ratio: 16 / 9; } }
- But we want to swap images according to their screen sizes. Luckily there's a native html element which may help us to achieve this method without need of css, So let me introduce the
picture
element.
- The
<picture>
tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.
- Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>
- In this example, the
<picture>
tag contains three child elements: two<source>
elements and an<img>
element. The<source>
elements specifies different image sources and the conditions under which they should be used.
- Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user
- If you have any questions or need further clarification, you can always check out
my submission
and/or feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @R3ygoskiPosted 6 months ago
Hello again James, and again congrats, your project is very close to the proposed design.
About the padding, I don't think that this is the problem in 375px, I think the real problem is in the
div.container
, I change it towidth: 92%
and seems it's helped a little bit. And I changeddiv.right-container
width towidht: auto
, now it's seems way better, please give a try and say what you think.Edit: Yeah, there was a problem with padding too, I changed
padding-left
andpadding-right
to 30px, now it's seems better.Again congrats on conclude another project, you are doing good, and I don't know when you started this project, but again, be cautious with Inline CSS. If somethind that I said was unclear, you know, fell free to comment bellow and I will try to help in the best possible way.
Marked as helpful0@JamesWallison1Posted 6 months ago@R3ygoski Seeming that you are really active at this time, I have read through all your comment and concluded that: You are really awesome. By the way, thank you really much for the advices, I will fix that as soon as possible!
1 - @sivaprasath2004Posted 6 months ago
Hello i`ll wishing for your completion project solution.
- I will give some suggestion i believe its used for improve your skill.
- In CSS You will use
.right-container { padding: 30px; }
- I will recomand for Using rem values for padding provides a scalable and flexible approach, especially when considering accessibility and responsive design.
.right-container { padding: 3rem; }
Marked as helpful0
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