All comments

• 

  Nipuni Wimangsa•10

  @Nipuni-WimangsaSubmitted over 1 year ago

  1. Do I have another way to center the card without using flex?

  2. Did I overdid assigning classes to HTML properties?

  3. Did I miss something in the design?

  I welcome feedback apart from these questions as well. Thank you in advance.

  

  Flex Display Property

  5

  91
  

  Meraj sharif•100

  @Meraj-Sharif-KhanPosted over 1 year ago

  To center the card Use display:grid; and place-items:center; and use min-height:100vh instead of height:100vh for your container class, That way container will grow with content otherwise it will remain 100vh (100% of viewport height).

  .container {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Marked as helpful

  1
• 

  stvpormvndi•10

  @stvpormvndiSubmitted over 1 year ago

  Does anybody know why It seems like you can't add two variables with the calc() function ?

  

  Qr code card using vanilla CSS

  1

  50
  

  Meraj sharif•100

  @Meraj-Sharif-KhanPosted over 1 year ago

  Adding variables with the calc() function

  --padding-vertical: 5rem; .block{ padding-bottom: calc(var(--padding-vertical) + 4rem); }

  0