Dark Aesthetic - Social Links

Community feedback

• 

  Darshan•210

  @its-subhashPosted 9 months ago

  @hp-8 Hey, your solution look good in first glance but it have some major problems specially regarding Responsiveness , so here are some suggestions which can improve it with least amout of efforts...

  • in .main{} theres no need to put height and width specially not something like vh or %, it just makes your code look terrible while checking it's responsiveness... the better way of handling width and height of continer is to let it be grow with elements you add inside of it. Or add margin and padding for inner space.

  so in your .main you can add padding:30px and remove height and width so it will grow with more link added in future.

  • for .press{} it's the same advice as .main but since your button should be bigger and of fixed with, you can use width:100% so it captures all the space available for button, also you can add some gap to look it better, i found gap:0.5rem better in your case.

  • for <button> you have set it's width to 15vw thats why content gets overflow while changing responisveness, so insted of that, now since you have enough space for buttons after changing .press{} properties, you can now set it's with to 100% and all button will be set.

  • in addition, buttons should change color while hovering so use button:hover{ background-color: hsl(75, 94%, 57%); }

  that would be better... and all set.

  Hope you liked my suggestions

  Happy Coding

  0

  ---

  

  H P•20

  @hp-8Posted 9 months ago

  @its-subhash This was such a great insight. I found these suggestions very helpful and realized my mistakes as you humbly mentioned them. Thank you for educating me on this.

  Happy Learning !

  1