Social links profile using html and css

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @mayank1405,

  Congratulations on completing another great project! I'm happy to see your progress. Very good that you decided to experiment with relative CSS units. You made a good start!

  A bit of friendly constructive feedback:

  • At the moment when you make the viewport smaller you get some overflow issues. The content in the card overflows out of the card. This is due to the height: 58vh; you have on the card.

  About vh:

  vh stands for viewport height. This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height. A value of 100vh is equal to 100% of the viewport height.

  So when you resize the viewport the size of the card changes as well. In this specific project you don't want the card to resize. You want it to stay centered in the middle at a fixed width until the width of the viewport gets smaller and then the card scales with that. I'll give you a nudge in the right direction. Try setting the with of the card as a fixed value and let the content of the card decide the height. Again it's very good that you experimented with viewport units to get it to look better on mobile, it's just getting to know when and where to use the different units.

  • I suggest using pixel or percentage values for border-radius. You generally don't use viewport units for the border-radius property because you want it to stay the same on any device.

  • I see you use a lot of ID's. Am I safe to assume you do this because you want to style things specifically? It's alright to just use classes for this. You could name your h2 .card-title for example. And the p under that as .card-description. You can read about when to use class or id here.

  I hope this answers your questions. I would appreciate it greatly if you could mark my comment as helpful if it did help you out!

  Marked as helpful

  0