Can the Icon on the Social element be aligned to the top so it's in line with the text?

[core365]

Hi, is it possible for the icon on the Social element to be aligned to the top so it’s in line with the text? I’ve had to use margins to achieve this, but then when you view it on a mobile, if the text splits over 2 or 3 lines then the icon shows further above the text and is cut off! I’ve tried to do it myself with CSS but can’t figure out how to do it!

I hope you can help!

Here’s the URL:
https://www.core365.co.uk/test-get-in-touch

Thanks!

[christian]

Hey @core365,

I’m sorry but I’m not sure if I understand the problem correctly. Do you want to turn this:

into this:

If so, please add this code in Theme Options > CSS. This will restrict the Topbar Info to 75% width in desktops to give space to the Social icons.

@media (min-width:768px) {
    .x-topbar .p-info {
        width: 75%;
    }  
}

If you’ll add icons in the future, you’ll need to reduce the Topbar Info’s width further.

Hope that helps.

[core365]

Hi, I’m ever so sorry, I forgot there were icons in the topbar, I meant the ones within the page content! I’ll include a screen grab at the end.

The icons I’m referring to are for the ‘Call us, Email us and Visit us’ text. I’ve had to add 30px bottom margin to the graphics to try to push them up to line up with the top of the text, and they all have to have the same amount applied otherwise they then don’t line up as they’re all on the same row next to each other (when viewed on a desktop).

Hope that all makes sense!

Thanks!

[ruenel]

Hello @core365,

Do you want something like this?

If that is the case, simply remove the 5% left padding you have added in the section settings because that 5% is really noticeable in smaller screens and that is what is causing this issue.

Hope this helps. Kindly let us know.

[core365]

Hi, no, sorry, it’s lining the top of the icons with the top of the text:

But this will also need to work when viewed on a desktop, as they are on the same row and when I’ve tried to adjust the heights of them, the text then is misaligned with each other!

Thanks!

[paul.r]

Hi @core365,

To adjust the alignment, you can adjust the following settings.

Hope that helps

[core365]

Hi, thanks, but the problem with doing that is that I can get it to look fine on the desktop, but then when you view it on a mobile, the ‘Visit Us’ icon isn’t aligned to the top anymore. That’s why I wondered if there was any CSS which would align the icons to the top of the text without having to add in margins.

Thanks!

[jade]

Hi @core365,

Please add this code to the Element CSS of the button elements:

@media (max-width: 580px) {
    $el.x-anchor .x-graphic {
      margin-bottom: 8px !important;
    }
}

Element CSS | Themeco Docs

Please change the margin bottom value accordingly for each of the elements accordingly.

Hope this helps.

[core365]

Excellent! Thank you so much, you’ve sorted it!

I really appreciate your time and help with this, thanks!

[friech]

We are delighted to assist you with this.

Cheers!