Social Icons too small or too close together

BB Theme
1

I just did a Google analysis of my website, and one of the items under the heading “Should probably fix” was:

Size tap targets appropriately
Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.

They were referring to the social icons. Is there a way to make them bigger, or separate them more?

Thanks,
Douglas

2

Hey Douglas,

Could you please share your Website URL with us so we could have a better look at your issue? You can use the private reply option below.

Thanks!

KC

3

[Content Hidden]

4

Hey Douglas,

That should be possible via custom CSS. Try adding the CSS snippet below.

.fl-social-icons .fl-icon {
  font-size: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

You’ll have to play around with the values to get what you want. Just make sure the height and line-height values stay the same to keep the icons vertically centered. :slight_smile:

Ben

5

Thanks, Ben.

As usual, your CSS coding did the trick. I had to change them to 40 to make them work but…

The analysis says:
All of your page’s links/buttons are large enough for a user to easily tap on a touchscreen.

Thanks again,
Douglas

6

Hey Douglas,

Sorry, is that going to be a problem still? Pretty confused with the but there. :slight_smile:

Ben

7

Hi Ben.

Didn’t mean to confuse you. Nope; no problems. I guess I should have replaced “…” after the word “but” with a colon “:” I was just trying to show you that I did need to change the values, (as you told me I might need to,) but the new analysis now said that the icons were now large enough.

And then, I changed the status to “resolved.”

Sorry for the confusion.

Douglas

8

Awesome! No worries at all! Enjoy BB! :slight_smile:

Ben

9

Hi Ben I seem to be having the same issue this is for the social icon buttons that you add via advanced modules. I have tried the above custom CSS code and it doesn’t appear to be working. I will send you my URL in a private message.

10

[Content Hidden]

11

Hey Mathew,

It seems the issue on your end is that the icons are too close to each other on mobile. Try adding the CSS snippet below instead and see if it fixes it.

.fl-module-social-buttons .fl-social-button {
  margin-bottom: 10px;
}

Ben