@ibra-san
Posted
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 helpful
@MaskeyDude
Posted
@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 :]
@ibra-san
Posted
@MaskeyDude walaikum al salam wa rahmatullahi wa barakatuh
Thanks bro, appreciate the nice words.
@MaskeyDude
Posted
@ibra-san You're welcome.
