Mobile Menu - Social Icons

Site URL: https://www.birdmafia.com

On desktop version of site the social icons look great. When on mobile and you click the 3dot icon, they show up but way too big. Is there a way to resize them just on mobile and leave the size on desktop alone? Searched quite a bit and couldn't find anything.

Add to Home > Design > Custom CSS

@media screen and (max-width:768px) {
.tweak-show-social-in-header .mobile-social .sqs-template-social-icons .sqs-svg-icon--wrapper {
    width: 30px;
}
}

Thank you so much!!!!

I added //social icon resizing// to it, so I know what that piece does.  I tried labeling something in an individual page's header code injection, but it said there was a syntax error.  Is there a way to label code in an individual page's header code?  I'm trying to keep track of what each code snippet does, for future adjustments.

/* enter your comment here */
@media screen and (max-width:768px) {
.tweak-show-social-in-header .mobile-social .sqs-template-social-icons .sqs-svg-icon--wrapper {
    width: 30px;
}
}

I tried this code to reduce the size of my instagram icon at the footer on my mobile website. The code didn't work. What did I do wrong? Thanks.

12 hours ago, davidhunternyc said:

I tried this code to reduce the size of my instagram icon at the footer on my mobile website. The code didn't work. What did I do wrong? Thanks.

Can you share site url? We can check easier.