Password page, adjust instagram icon

[Eve25]

Hi Everyone,

I want to change the color of the instagram Icon, it's filled purple in mobile and I want it to have a transparent filling:

https://www.evesanthology.com/password 

Any idea how to do that? Or is this a pre-set in the icon by instagram? If so; where can I change this icon? I am using prestige theme,

Thanks a lot!! 

 

[GTLOfficial]

Hello @Eve25 
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

@media not screen and (pointer: fine) {
.social-media--block .social-media__item {
background: transparent;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Eve25 · Accepted solution]

Thanks for your quick reply. That looks already better! Will there always be a fine purple box line? Or can I make that line transparent as well?

[Eve25]

hereby the code that worked with white lining:   @media not screen and (pointer: fine) {
.social-media--block .social-media__item {
background: transparent;
border: 0.5px solid white;
outline: 0.5px solid white; /* Optional, adds an additional effect */
}

Thanks to both of you for helping as I made a combination of both solutions 🙂

have a great day!!!

[DaisyVo]

Hi @Eve25 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){
.password__inner li.social-media__item.branding-colors--instagram {
outline: 1px solid white !important;
}
}
{% endstyle %}