Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #575118

    Hi guys,

    when using Google Page Speed/Insights, my website looses a couple of points as the different social icons are too close to each other and too small.

    I have enlarged the icons by using this Quick-CSS:

    #top .social_bookmarks li a { font-size: 18px; }

    But how can I increase the spacing between the different icons?

    Thank you so much in advance.

    Best
    Urs

    #575133

    Hey wayfareescort!

    Add this to your custom CSS.

    .social_bookmarks > li {
        margin-left: 20px;
    }

    Regards,
    Elliott

    #576755

    Hey Elliot,

    that sounds nice, but apparently there are these little spacing lines between the horizontalt icons. If I put your code into quick CSS, the left margin actually is 20 px, but the icons are “glued” to these spacing lines on the right.

    Can the icons be centered within these spacings?

    Still with your code snippet, Google Page Speed complains the icons are still too close together in mobile view:

    Wayfare Escort mobile view social icons too close

    #576980

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    #578142

    Hi Rikard,

    sure! Please do not be too surprised what our site is all about. ;)

    https://wayfare-escort.de

    #579334

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #top .social_bookmarks li a, #top .social_bookmarks li {
        width: 40px !important;
    }

    Best regards,
    Rikard

    #596341

    Worked like a charm, thanks a lot guys!

    #596788

    Hi,

    Great, glad we could help :-)

    Thanks,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.