I feel it's difficult to put the image and the production info inside my <article> component. How to evenly divide space between these two? I also feel hard to decide whether to set a width or height for my component?
There are something wrong about my shopping cart icon as well.
What are some suggestion for using media query?
What is the best practices to set a component center?
Thank you in advance!
@catherineisonline
Posted
Cool solution!
To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL š¤©
Marked as helpful
@amalkarim
Posted
Hi Effy,
At some point, like in the design comparison above, the image height is shorter than the description area. I think it's caused by this style: align-items: center; of the article element. Change it to align-items: stretch; will make sure the image height is always the same as the description area. But, at the same time, it could change the image proportion at certain width. To prevent that, add this style to the image:
img {
object-fit: cover;
}
ā¢ā¢ā¢
Your shopping cart is affected by the style that you actually want to implement to the main image (while in desktop view). It is affected by this style:
@media (min-width: 600px) {
img {
content: url(image-product-desktop.jpg);
....
}
}
My advice is you better change the selector for the main image by adding class to the main image, so that it won't affect the cart image anymore.
Hope this helps. Happy coding!
Marked as helpful
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
