3 column preview card

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  Hello Matt!

  Your project looks great! Beautiful and responsive.

  I have a tip that might help you:

  • You can add height: 100vh to your body tag on your desktop version. Doing that, you won't need margins to center the card.

  Other than that, great job. Both desktop and mobile versions are perfect 👌🏼

  0

  ---

  

  P

  Matt•50

  @Matt-LaRochellePosted 11 months ago

  @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

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  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.

  0

  

  P

  Matt•50

  @Matt-LaRochellePosted 11 months ago

  @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.

  0