Design comparison
Community feedback
- @correlucasPosted over 2 years ago
👋 Hello Isinkaye, congratulations for your solution!
-
I saw your solution and to make your card component more flexible, try to avoid the use of fixed values, I saw that you used % for the card width and px for height. Try to use max-width for the card width, this way the card will stretch in a width under 350px, for example
.container {max-width: 350px;
instead of using width: 30%, and for the height you dont need to set a value, using the padding for the headings, paragraphs and button your card will automatically grow without you need to set a height. -
For the mobile version you can set some different sizes for the fonts and set properties like flex-direction, if you`re using flexbox. You'll need media queries to define when the website will change from desktop to mobile.
Determine breakpoints for the component depending of the device/width using media queries. You can have more info about media queries here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can also check how a did with the media queries in my solution for the same challenge:
https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa/hub/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
I hope it helps you!
Marked as helpful0 -
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