Responsive Product Card Page Using Flexbox and Mobile First Design
Design comparison
Solution retrospective
I struggled a bit getting the images to be the correct size and ended up using min and max width and height properties. Is there a better way to go about this?
I'm new to responsive design and would appreciate any suggestions to make my code more dry and semantic.
Community feedback
- @jbidzPosted almost 2 years ago
Hello Amy,
To make your layout simpler you can make a
<div class="container">
and wrap your entire component in that div. Also, make sure to wrap that container inside themain
element and remove all the styling for thatmain
.<main> <div class="container"> <div class="your-component"></div> </div> </main>
To center you component, add this style to the
container
.container { max-width: 600px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
Make it a display of flex and flex-direction to column to center your component in the screen.
Now, all you need to do is to style your component. The easiest way to achieve this is using flexbox and grid. I recommend flexbox for this case.
.component { display: flex; } .hero-img { flex: 1; } .product-desc { flex: 1; }
Now, to make it mobile responsive use media query to set the
flex-direction
of a component tocolumn
.@media (max-width: 600px) { .component { flex-direction: column; } }
And that's it. Congratulations on making a step on this challenge. If you think this helps you a little. Please consider to marked this comment as helpful😊.
If you have any questions feel free to reply on this comment😊
1 - @Nadine-GreenPosted almost 2 years ago
HEY AMY!
Congratulations on completing your first challenge :)
I love the remembrance of your solution to the design, nice.
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