Design comparison
Community feedback
- @correlucasPosted over 2 years ago
👾Hello რეზი კარანაძე, congratulations for your solution!
I've looked your code and I think you can use a simple way around it, creating a cleaner html structure and use less css to reach the challenge goals, you've used a lots of
position: relative;and its kinda tricky to manage all content using this kind of approach. My tip for you is use flexbox to manage the container elements.The basic structure for this challenge is:
<body><main> (to wrapp all content) <div><div> (for the card image)<div></div>(for the content)</main></body>My recommendation is that you use grid for this challenge, to have a simple container with two columns the same size each with
display: grid;andgrid-template-column: 1fr 1fr;(for the media query mobile you need only to change thegrid-template-column: 1fr;.I've used this same approach in my solution and I'll let you the solution link below if you want to use it as a reference, not that if you refactor your code you'll gain time instead of fixing it now, trust me:
My solution: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
If you're not familiar to GRID, here's the documentation: https://css-tricks.com/snippets/css/complete-guide-grid/
Hope it helps you რეზი კარანაძე, happy coding!
Marked as helpful0 - @rezi-rezikoPosted over 2 years ago
thanks, your feedback helps, but know i'm working on layouts with position.
0
Please log in to post a comment
Log in with GitHub
Join 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