Profile Card Component HTML5 CSS3 Sass

Community feedback

• 

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  Hello Vanza, I was having a hard time trying to understand your calc(47vw + 15%) and calc(65vh - 15vw).

  Is there a documentation or a video about using calc with view-width plus percentage and view-height minus view-width?

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pyaetheiN Hi Ricky! 👋

  First, it's not my code. I actually used the ApplePieGiraffe code to align the background images. I might need to put an attribution to his solution on my CSS. 😅

  MDN has a great documentation about calc(). So, about this code.

  background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), left calc(40vw + 25%) top calc(72vh - 15vw);
  

  So, let me explain it.

  • First let's discuss the right calc(47vw + 15%). It's telling the browser that, "hey! I need the first background image to be aligned to the right with this calculation". The calc(47vw + 15%) means that whatever the 47vw of the user screen adds 15% of "something" to it. So, the purpose is to make the background image adjust automatically based on the user's device screen.
  • Second, the bottom calc(65vh - 15vw) is telling the browser, "hey! I want the first background image to be positioned at the bottom based on this calculation." So, the same as the previous code it's going to adjust automatically based on the user's device screen. However, this time it's the calculation between the viewport height and the viewport width.
  • Lastly, left calc(40vw + 25%) top calc(72vh - 15vw) it's telling the browser to position the second background image based on these calculations.

  Hopefully, this makes everything clear! If you still have questions feel free to ask them! 😊

  1

  

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  Thank you Vanza 🙏 for explaining me and sharing your reference, you’re awesome 🤩.

  0
• 

  P

  Joel•290

  @joelsalmeidaPosted over 3 years ago

  If you didn't say you do it on your smartphone... no one would know.

  I had problems trying to use @use instead of @import. Looks all right on your project.

  Absolutely a good job. Looks good on all screen sizes.

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @joelsalmeida Thank you! To use @use you need the newest version of Sass, you can get it by installing nodejs and type in the command line npm i -g sass, that way it will install the newest version of Sass.

  For more information you can check the Sass documentation or you can watch this video

  Hopefully it's helpful, and happy coding!

  1
• 

  Amon•2,560

  @A-amonPosted over 3 years ago

  Wow! That's amazing :0 It looks good on my laptop, and the desktop and tablet view (based on dev tools)

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @A-amon Thanks!

  0