How to centre social media icons? Default theme : PS 1.6

[BrainSuperGlue]

Hi,

I've got the standard social media icons displayed on the front page. All good  except the icons are right justified. 

I'm trying to work out how to centre them as per the attached picture.

I couldn't find a solution on Google, so please could someone point me in the right direction.

Many thanks

BSG

 

Edited March 1, 2019 by BrainSuperGlue (see edit history)

[BrainSuperGlue]

I've done some digging and under /public_html/ecomm/themes/default-bootstrap/modules/blocksocial/blocksocial.tpl there is a section 

<section id="social_block" class="pull-right">

If I change pull-right for anything else (such as text-centre and then the Follow us icons go past the centre and stay around halfway between the centre and the left.

Do I need to use Bootstrap grid reference with changes in the css?

Any guidance would be very grateful.

Thanks

BSG

[JBW]

It depends on the design of your theme and how to hook for the module is placed there. If you post the link to your site here we can check if this can be changed by simple CSS change or if you have to adjust your theme's template files.

[BrainSuperGlue]

 

On 3/4/2019 at 12:57 PM, JBW said:

It depends on the design of your theme and how to hook for the module is placed there. If you post the link to your site here we can check if this can be changed by simple CSS change or if you have to adjust your theme's template files.

Hi JBW,

The website is https://secondtimearoundcharities.org/ecomm/ 

The theme is the standard default-bootstrap.

I meant to say that I've disabled the newsletter module throughout as we don't use it. Given it normally sits on the left hand side of that upper footer. I thought that once it was disabled the pull-left would left justify all the way to the left but it doesn't.

If it is of note, when you look at the page on mobile, the "Follow us" disappears

Many thanks

BSG

 

[JBW]

.pull-right is a css class which you can change in the correpsonsing file (theme.css). If you want the icons left you have to increase/reset the width and the float attribute of this class. You can play arond with is using the inspect function of you browser.

[BrainSuperGlue]

8 hours ago, JBW said:

.pull-right is a css class which you can change in the correpsonsing file (theme.css). If you want the icons left you have to increase/reset the width and the float attribute of this class. You can play arond with is using the inspect function of you browser.

Thanks JBW,

To confirm then, back to the original centering question, I would use the above for centering as I would do for left justify? Or do I need to do something else to keep them centred?

Many thanks

BSG

[BrainSuperGlue]

I checked through the list of css files and there isn't a theme.css for Prestashop 1.6 . Did you mean global.css?

Thanks

BSG

[JBW]

Hi,

yes in 1.6. default theme the file is global.css, but as I can see on your site you already figured that out

 

[BrainSuperGlue]

8 hours ago, JBW said:

Hi,

yes in 1.6. default theme the file is global.css, but as I can see on your site you already figured that out

 

Hi JBW,

Yes hadn't had a chance to say thanks.  63% did centre it.

I have noticed that when on mobile screens with it set to 63%, the Follow Us disappears and the icons move off-centre to the left.

I inspected the code and it says Follow Us is still on the page but clearly hidden.

Any thoughts?

Thanks

BSG