Social share - Icons (stretched on mobile)

How To
1

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:

desktop:

2

Hi there,

Can you share a link to your page please ?

Thanks and have a great day,
Thomas

3

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.

4

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

Have a great day,
Thomas

5

Hi @bricksy,

Thanks for your URL correctly received.

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

@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

1 Like
6

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.

7

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

image

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

image
image293Ă—642 11.5 KB

1 Like
8

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. ^^