Social icons in topbar and footer

Support
#1

I would like to be able to change the size of the social icons in the topbar and footer.

Thank you.

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Apologies - I forgot to include it.

URL: http://woodlandsdogsuites.com

#4

Hi there,

Please add this code in the custom CSS:

.x-social-global a {
    font-size: 24px !important;
}

Hope this helps.

#5

This works great on mobile devices, but not on the desktop?
I moved the window on the desktop in and out, and the icons changed to the larger size only when I reached a smaller window size.

#6

Hi there,

The code only worked for mobile because you placed it inside the mobile media query block:

/* Boarding page - CTA phone number styling on mobile */
@media (max-width: 767px) {
	.page-id-37 #x-section-12 .x-creative-cta > span {
		font-size: 9vw !important;
	}

/* Size of social icons in topbar and footer */
  .x-social-global a {
    font-size: 40px !important;
}

Please try to update that part to:

/* Boarding page - CTA phone number styling on mobile */
@media (max-width: 767px) {
	.page-id-37 #x-section-12 .x-creative-cta > span {
		font-size: 9vw !important;
	}
}

/* Size of social icons in topbar and footer */
  .x-social-global a {
    font-size: 40px !important;
}

Hope this helps.

#7

I see, thank you. I made the change and it worked. Is there any way to vertically center the social icons in the topbar? The larger icons are sitting a bit low.

#8

Hello There,

Please add following custom CSS code:

.x-social-global {
    margin-top: 5px !important;
}

Thanks.

#9

I used .x-social-global a { font-size: 24px !important; }
this pice of code. But it only works on my home page not other pages. Please help!

#10

Hi There,

For some reason, your CSS not parsing correctly. Can you add those CSS rules on top your custom CSS area.

You can also copy all of your custom CSS into an online tool like CSS Lint (http://csslint.net/) and see if you get any errors.

Let us know how it goes.
Thanks!

#11

Hi,
You are right. There was an error on my css and I have corrected it. I moved the code on the top custom css area and right now 2 pages work(home&Tiniblog), but others are still not working.

#12

never mind i have figured it out. it’s the cache plugin.

#13

Glad you’ve sorted it out.

Cheers!

#14

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