3-column-preview-card-component using HTML5 and CSS3.
Design comparison
Solution retrospective
Hi there š, Iām Vivek Rajput and this is my solution for this challenge.
š ļø Built With:
HTML5, CSS3.
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you.
Community feedback
- @madosyPosted over 1 year ago
For the buttons, either change the box sizing to border box or have the border all the time and change the fill on hover. Right now, when I hover on the button, I see the height of the card changing and I think it's due to the border on hover.
0@vivekrajput-93Posted over 1 year ago@madosy Thank you brother for feedback and Could you tell me how to change the button to the point where it doesn't effect the height of the card..and I tried (border-all) but its not working..please advice how to do it..
0 - @hitmorecodePosted over 1 year ago
Congratulations well done. Just a few pointers
- When using flexbox you don't need to add
flex-direction: row;
flexbox is by default set to row. - You add
font-family
to all three cards, you don't have to do this. If you addfont-family
to the body it will apply to the entire page. So no need to repeat that.
/* set media to min-width */ @media (min-width: 375px) { .container { flex-direction: column; max-width: 50rem; margin: 20px; } .first { /* border-top-right-radius: 10px;*/ /*border-bottom-left-radius: 0;*/ border-radius: 0 10px 0 10px; /* top-left, top-right, bottom-right, bottom-left */ } .third { /* see the comments above on how to short write border-radius */ border-top-right-radius: 0; border-bottom-left-radius: 10px; } }
You need to fix something, when screen size goes under 375px it changes the card.
0@vivekrajput-93Posted over 1 year ago@hitmorecode Thank you brother for feedback..First for font-family..it showing two diff font-family in the instruction...so I have to apply separately and I am grateful for flex-box advice I now am aware of that..Once thank you.
0@hitmorecodePosted over 1 year ago@vivekrajput-93 glad I could help. You are right they used two different font-family. When working with two different font-family, is best to apply the font-family that's most used on the body and the others direct on the element itself.
1 - When using flexbox you don't need to add
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