Jump to content

Social Links Blur Issue

Recommended Posts

Site URL: https://rafida.org


On our BRINE website, we added 4 additional custom social icons to the social links.

The colour of the social links is set to white
I added the below code in order to change the colour of the social links to grey on certain pages (e.g. product item pages)

After adding this code, the social icons did change to grey, but for some reasons 2 of the social icons are blurry.
The 2 that are blurry are 2 of the custom social icons that were added manually.
For some reason one of the other custom social icons did not turn blurry?

Also, it's important to mention, the blur issue only happens on Safari. On Google chrome there is no blur issue whatsoever...

I've added a screenshot showing the issue.

Any ideas how I can resolve this?
Kind regards

Site access:
pass: lastphasetesting3

Code added to change social icons to grey:

  .SocialLinks-inner a:nth-child(5){
    colour: #000000;}
  .SocialLinks-inner a:nth-child(6){
    colour: #000000;}
  .SocialLinks-inner a:nth-child(7){
    colour: #000000;}

.SocialLinks-inner a:nth-child(5){filter: brightness(50%);}
.SocialLinks-inner a:nth-child(6){filter: brightness(50%);}
.SocialLinks-inner a:nth-child(7){filter: brightness(50%);}


Screenshot 2020-09-24 at 06.18.48.png

Edited by Rafida
Link to comment
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Well I have change the colour to white by editing the SVG using VECTR.COM

The issue is that I actually need them white, but also need them grey to only certain pages.
That's why I added the code in the original post to change them to grey on specific pages.
But when I do that they turn blurry 🤕

Link to comment
9 hours ago, Rafida said:

Could you help me do that please? Wouldn't know how to...

Also the code you provided only changes the standards social icons to grey (youtube, facebook, twitter), and not the additional custom social icons we've added (discord, patreon, whatsapp, email)

Please contact me via DM.

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.