# CSS button block gap & icon/svg size

**URL:** <https://community.glideapps.com/t/css-button-block-gap-icon-svg-size/74320>\
**Category:** Ask for Help\
**Created:** [June 22, 2024, 12:10pm UTC](https://community.glideapps.com/t/css-button-block-gap-icon-svg-size/74320 "2024-06-22T12:10:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [June 22, 2024, 12:10pm UTC](https://community.glideapps.com/t/css-button-block-gap-icon-svg-size/74320/1 "2024-06-22T12:10:01Z")

</div>

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;  
> }

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/6/36bc201b67fdaf465d8d4779e16886f5ad509a77.jpeg)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 22, 2024, 1:01pm UTC](https://community.glideapps.com/t/css-button-block-gap-icon-svg-size/74320/2 "2024-06-22T13:01:18Z")

</div>

![Screenshot 2024-06-22 at 20.05.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba3869be9c713ec6f20a750b27ca4f9f67dfb4e4.png)

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [June 22, 2024, 1:48pm UTC](https://community.glideapps.com/t/css-button-block-gap-icon-svg-size/74320/3 "2024-06-22T13:48:21Z")

</div>

awesome, thank you so much!

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [June 29, 2024, 1:48pm UTC](https://community.glideapps.com/t/css-button-block-gap-icon-svg-size/74320/4 "2024-06-29T13:48:56Z")

</div>

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