CSS button block gap & icon/svg size

Hi
I have created the CSS below to adjust my bottom block as below. I’d like (1) a bigger gap between the buttons and (2) to increase the icon size, but can’t seem to find how to do this - any ideas?

cheers

.fixed-button-block{
margin: 0px;
//background-color: white;
top: 70%;
left: 0%;
position: absolute;
z-index: 999;
}
.fixed-button-block svg {
//width: 300px;
//height: 1000px;
color: white;
}
.fixed-button-block div{
height: 30px;
color: white;
font-size: 20px;
}
.fixed-button-block [aria-label=“Join”] {
background-color: rgba(0, 204, 204, 0.7);
color: white;
width: 10px;
//left: 400px;
border-radius: 30px;
}
.fixed-button-block [aria-label=“Events”] {
background-color: rgba(29, 54, 95, 0.7);
color: white;
border-radius: 30px;
}
.fixed-button-block [aria-label=“Sites”] {
background-color: rgba(29, 54, 95, 0.7);
color: white;
border-radius: 30px;
}
.fixed-button-block [aria-label=“Learn”] {
background-color: rgba(29, 54, 95, 0.7);
color: white;
border-radius: 30px;
}

.fixed-button-block .button-box{
gap: 30px;
}

.fixed-button-block .button-box >  * > div:first-child, .fixed-button-block svg{
width: 50px;
height: 50px;
}

.fixed-button-block .tiles .button-text{
font-size: 30px;
}
3 Likes

awesome, thank you so much!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.