# Social share - Icons (stretched on mobile)

**URL:** <https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801>\
**Category:** How To\
**Tags:** how-to\
**Created:** [November 14, 2022, 3:02am UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801 "2022-11-14T03:02:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bricksy](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/bricksy/32/6094_2.png) [@bricksy](https://forum.bricksbuilder.io/u/bricksy)\
**Post date:** [November 14, 2022, 3:02am UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/1 "2022-11-14T03:02:22Z")

</div>

the social share icons are showing normal in desktop mode, but when I click on tabled or mobile, the icons are stretched. Is there an easy way to keep the ratio of the icons correct on mobile?

mobile:

> **[social-sharing-icons](https://ibb.co/F5NK4sX)**
>
> Image social-sharing-icons hosted in ImgBB

desktop:

> **[social-sharing-desktop](https://ibb.co/Qnj7dcc)**
>
> Image social-sharing-desktop hosted in ImgBB

---

<div class="post-metadata">

**Author:** ![HomeSweetTom](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/homesweettom/32/6837_2.png) [@HomeSweetTom](https://forum.bricksbuilder.io/u/HomeSweetTom)\
**Post date:** [November 14, 2022, 2:58pm UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/2 "2022-11-14T14:58:05Z")

</div>

Hi there,

Can you share a link to your page please ?

Thanks and have a great day,  
Thomas

---

<div class="post-metadata">

**Author:** ![bricksy](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/bricksy/32/6094_2.png) [@bricksy](https://forum.bricksbuilder.io/u/bricksy)\
**Post date:** [November 14, 2022, 6:45pm UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/3 "2022-11-14T18:45:10Z")

</div>

Helli,

Is it possible to send you the link hidden?

The “Hide Details” icon in this chat window does not seem to work, it does not hide but only puts a summary element.

---

<div class="post-metadata">

**Author:** ![HomeSweetTom](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/homesweettom/32/6837_2.png) [@HomeSweetTom](https://forum.bricksbuilder.io/u/HomeSweetTom)\
**Post date:** [November 14, 2022, 7:10pm UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/4 "2022-11-14T19:10:55Z")

</div>

Yes, you can send me a private message with your website URL.

Have a great day,  
Thomas

---

<div class="post-metadata">

**Author:** ![HomeSweetTom](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/homesweettom/32/6837_2.png) [@HomeSweetTom](https://forum.bricksbuilder.io/u/HomeSweetTom)\
**Post date:** [November 15, 2022, 9:08am UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/5 "2022-11-15T09:08:41Z")

</div>

Hi @bricksy,

Thanks for your URL correctly received.

The problem comes from this line of CSS that you need to remove:

```auto
@media (max-width: 991px)
.Align-Centre.brxe-post-sharing a {
    width: 100%; 
}

```

If you want to adjust the size of the background red circle, you can instead play with the padding values of the “Social share” element by going to Layout \> Padding when you are on the desired breakpoint.

Have a great day,  
Thomas

---

<div class="post-metadata">

**Author:** ![bricksy](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/bricksy/32/6094_2.png) [@bricksy](https://forum.bricksbuilder.io/u/bricksy)\
**Post date:** [November 15, 2022, 1:04pm UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/6 "2022-11-15T13:04:00Z")

</div>

Thank you for the help, but where can I remove that css code?

Since I did not add any additional into the Bricks theme yet, is that css code somehow a bug?

I will test it in the evening and let you know, thanks.

---

<div class="post-metadata">

**Author:** ![HomeSweetTom](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/homesweettom/32/6837_2.png) [@HomeSweetTom](https://forum.bricksbuilder.io/u/HomeSweetTom)\
**Post date:** [November 15, 2022, 1:11pm UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/7 "2022-11-15T13:11:47Z")

</div>

In the CSS, I saw, it is a global class:

![image](https://forum.bricksbuilder.io/uploads/default/original/2X/9/9b7e7d7e86fe6cc0b8f50284ff251ca8a7119371.png)

You may have declared a global class (.Align-Centre) in the “Social sharing” element:

 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/4/409629160454f3810099e251e2189434e9fecdfa.png)

---

<div class="post-metadata">

**Author:** ![bricksy](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/bricksy/32/6094_2.png) [@bricksy](https://forum.bricksbuilder.io/u/bricksy)\
**Post date:** [November 15, 2022, 1:22pm UTC](https://forum.bricksbuilder.io/t/social-share-icons-stretched-on-mobile/7801/8 "2022-11-15T13:22:59Z")

</div>

Thank you for explanation, I never would think that this class is responsible for that stretched icons.

Strange, since in that class I “thought” that in taht global class I only used for centering an element. I was not aware of that is also stretching to 100% width.

I removed that class and now the icons look perfect. ^^