Product preview component using html and css
Design comparison
Solution retrospective
I have completed another challenge from a front-end mentor and I am struggling to make it responsive, can anyone guide me to make it responsive. I will appreciate the valuable feedback.
Community feedback
- @ferlagherPosted over 2 years ago
Hi, Ravindra!
There are many ways to make a design responsive. You can use media querys, relative units, flexbox, grid, or a combination of all of them.
Here are some resources:
0 - @correlucasPosted over 2 years ago
Hello Ravindra, congratulations for having finished another challenge!
I'm with your solution website open and the component seems great. You need only to fix some minor issues and apply a media query to display the component vertically as the mobile version.
I'll give your some tips:
1.Align your card component to the screen center using
flexbox
andheight:100vh;
. Note that the height:100vh will allow you to have the body displaying 100% of the viewport making easier to align, see the code below:body { display: flex; height: 100vh; align-items: center; justify-content: center; }
2.Add a margin around the container to create a free space around the card and dont let the card touch the screen limit in smaller screens.
body {margin: 20px;}
3.Add a media query to change the card flow changing it to display one column and the content vertically. Not that a media query is a tool that allow your to apply changes to a certain element in a certain breaking point, in my following example the breaking point is width 700px. Code below:
@media (max-width: 700px) { .container {display: flex;flex-direction: column; }}
See the documentation about Media Query here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
4.To change the text-decoration and add a line over the "discount price" you can use this property in the price element:
text-decoration: line-through;
Ravindra I think that applying these changes your card will be fixed. Feel free to ask me any question and I hope it helps you. Happy coding.
0@socoolRKPosted over 2 years ago@correlucas Thanks a lot for your suggestion and I will try to correct it.
0 - @RafiiMahmudRiizviiPosted over 2 years ago
Hi Ravindra, i notice that the font-family of "$149.99" is not match with original design. If you change the font-family then your design look more beautiful.
0@socoolRKPosted over 2 years ago@RafiiMahmudRiizvii thanks for your suggestion and I did not notice the change while styling it.
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