@danielmrz-dev
Posted
Hello Matt!
Your project looks great! Beautiful and responsive.
I have a tip that might help you:
- You can add
height: 100vhto yourbodytag on your desktop version. Doing that, you won't needmarginsto center the card.
Other than that, great job. Both desktop and mobile versions are perfect 👌🏼
@danielmrz-dev Hi Daniel,
I really appreciate your feedback, but I don't understand how this helps... If I add height:100vh to the body tag then when I shrink the window vertically on desktop, or when I look on a phone in a horizontal mode, it cuts off a lot of the main element. I think I prefer my own way as it works on all screens I tried it on. Please let me know though if I'm mistaking what you have written!
Thank you! Matt
@danielmrz-dev
Posted
Hey @Matt-LaRochelle
Adding height: 100vh to the body tag along with
display: flex;
flex-direction: column;
place-items: center;
is a technique we use to center elements in the middle of the page without using margins.
This is not working for you because your card has a margin-top: 100px and your footer has a margin: 40px auto 15px;.
All those margins use space that was supposed to be occupied by your card. This is why it cuts off parts of your main element sometimes.
@danielmrz-dev I see, thank you for your feedback! The place-items rule will definitely come in handy, I didn't know how that one works.
After making the changes, I still was running into the problem where if the window is vertically too short it won't let me scroll to see the rest of the card.
I found a solution though - on the main element I had used overflow: hidden in order to have the border radius working. I added overflow-y: scroll and now everything is working properly.
