Design comparison
Solution retrospective
- What did you use to center your card/box?
- Did you spend too much time on styling attributes too?
- Was it hard or easy to use more than one image for different sizes?
Community feedback
- @ibra-sanPosted over 2 years ago
Hi Omar, awesome work bud. Congrats on completing this challenge.
-
I would definitely use flexbox to center the card. Think of flexbox as tool that will allow you to organize your box. So if you use display: "flex" on your body, and then justify-content: "center" align-items: "center". Everything inside the body tag will be vertically and horizontally centered in the body. Now if you stretch the width and height of the body to fit the entire page by using width: 100vw and height: 100vw then you will be making sure that the body tag will fit the full width and height of every view-port. Now your box will be vertically and horizontally centered on every viewport.
-
haha quite a lot.
-
Well initially I thought it was going to be tough, but I googled and found out about srcset attribute for img tags. That tell your html to swap images automatically given the different view ports.
Thanks and good luck.
P.S I am a newbie all the advice I give is based on my humble experience.
Marked as helpful0@MaskeyDudePosted over 2 years ago@ibra-san Assalam U Alaikum, Ibrahim.
- I had been so frustrated centering the card and forgot I could use flexbox. About the 100vw/100vh I haven't tried it so this is some valuable advice. I'll use these methods in future projects as they seem much better than whatever I did.
- We're literally bros dude
- That was my exact thought as I haven't used 2 images for different sizes before
On a side note I wouldn't think you're just starting out if you didn't say it yourself as your way of giving advice is professional. Thank you fella, I'm glad for these tips :]
1@ibra-sanPosted over 2 years ago@MaskeyDude walaikum al salam wa rahmatullahi wa barakatuh
Thanks bro, appreciate the nice words.
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