Product Preview Card Component (Flexbox & Grid)
Design comparison
Solution retrospective
Heya...Fourth Challenge done. ✔ Now then, I had a few issues in this one pertaining to the sizing of the image.
Feel free to comment with other code improvement suggestions of your choice.
Community feedback
- @oliwiakrammPosted over 1 year ago
This comment was deleted 9 months ago
0@michaelo-oPosted over 1 year ago@oliwiakramm I've taken your suggestions into account, however, I have questions concerning the usage of the
picture
element. I tried using it and the styles of the classesimgdesktop
andimgmobile
were not applied anymore, causing the images to be displayed in their original size and without theborder-radius
property. Can you let me know how I can apply styles to the images in thesource
tag?0@oliwiakrammPosted over 1 year ago@m1chae-l
-
I won't be able to exactly tell you your solution because I don't have time to refactor your code, but some of the stuff that you can refactor in your code is add CSS reset, remove one of the 2 sources, only 1 is needed the other is an img element and this one you style, remove
productcont
as it's unnecessary here, this is also breaking your codemain{ justify-content: center; align-items: center;}
because it's aligning your elements for no reason and breaks picture,main> *{flex basis 50%}
will make picture and .productinfo have exactly 50% and you needmain{max-width:37.5rem}
to limit the width and it will also shrink the element -
you can check @MelvinAguilar solution or @vcarames since they both used
picture
element in their solutions and their projects are really good. -
css reset will help you to style things by removing some of their original styles and will help you with styling images by giving them max-width:100% and display:block.
-
About
border-radius
there is no need to put it on your images, what you could do is put border-radius on main and writeoverflow:hidden
so img won't overflow your main and will have a nice border-radius
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