css Problem

Question

In this Code I have a small round button which gives the user info about the code. I've managed to make it round, but it is quite big, for me atleast ...
I've searched quite a bit but I haven't found a way to make it round and smaller ...

https://code.sololearn.com/WNATg3A0sm0e/?ref=app

Answer 1

You can use the height and width properies to set the size. In your css for your #item selector, add a line specifying the width and also eliminate the padding. Also, to center the i, change the display property to flex and assign align-items and justify-content to center like below:

#info{

display: flex;
align-items: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 0;

}

Just change the height and width properties to make the size bigger or smaller.

I hope this helps!

Answer 2

It looks good enough for me. 😁
You could add css outline:none; to remove that orange square when you press the button.

Answer 3

🐯 Alex Tusinean 🐤 & Mike Perkowski thx alot!! 😄