Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello ASH2001, congratulations for your new solution!
I saw that you tried to manage this solution using
position relative
and margins to create it, its kinda tricky to build this solution using these properties. My advice for is to useGRID
here's a quick guide for you to use GRID:This is my approach to create this solution with GRID and 2 columns all you need to do is create a main block to hold all the content (you can use
<main>
to wrap), set itswidth
asmax-width: 900px
(it's the container size) anddisplay: grid
/grid-template-column: 1fr 1fr
(this means that your component will have two columns with 50% of the container width each thats 450px).You can manage the product image inserting the tag
<picture>
to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with thepicture tag
you can look at the documentation to see how to set it:https://www.w3schools.com/tags/tag_picture.asp
π¨βπ» Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
π I hope this helps you and happy coding!
Marked as helpful0@ASH2001princePosted about 2 years ago@correlucas thank you so much M.r Lucas I was really afraid of working with the Grid system I
ll check on your work and I believe I
ll learn a lot from it.1
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