Product Preview Card Component using flexbox CSS
Design comparison
Solution retrospective
The mobie version I had no problems with. I found myself having to make the <img> width 175% to fit half of the card on the desktop version though. What suggestions do you have in working with flexbox rows with this image?
Community feedback
- @elaineleungPosted about 2 years ago
Hi David, you did well here in getting your solution look close to the design, and both the desktop and mobile views look good 😊
About your question, what I suggest that instead of 175% on the
.card-image
, you can use flexbox's properties to useflex: 1 1 50%
on the children containers, so try adding that on.card-image
andcard-information
.I also suggest that instead of using a 175px left margin on your
card
container (which I'm guessing is for centering the component), try changing the margin to just1rem
, and then on thebody
selector, addmin-height: 100vh
andjustify-content: center
to center the component.Hope this helps!
Marked as helpful0@codeDavidCPosted about 2 years ago@elaineleung Thanks, Ill try this over the weekend!
0 - @AdrianoEscarabotePosted about 2 years ago
Hello everything is fine?
You did a good job on this challenge, but I have a few tips that I think you'll like:
I noticed that the content of the layout was not so aligned, when working with a card like this, prefer to center it this way:
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min height: 100vh; }
This will avoid problems!
The rest is really good! Hope it helps... 👍
Marked as helpful0@codeDavidCPosted about 2 years ago@AdrianoEscarabote Thanks for your tip! Yeah I've been having aligning struggles.
0 - @DavidMorgadePosted about 2 years ago
Hello David, congrats on finishing the challenge! great job!
Another workaround to fix this issue would be giving the text box a smaller width so the
div
with thepicture
takes a little more space, for examplewidth: 90%
Apart from that, instead of giving a
margin
to yourdiv class='card'
you should try usingjustify-content: center
on the body, this will center the card without the needs of margins, you would need to set themin-height: 100vh
in the body tho, so it wraps the full screen!Hope my feedback helps you, great job getting the challenge done!, I encourage you to try harder challenges!
Marked as helpful0@codeDavidCPosted about 2 years ago@DavidMorgade You're right, I'll try one more "newbie" challenge and move on to some harder challenges. Thanks!
1
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