How to Change Size of Social Icons in Mobile 7.1?

Site URL: https://sealion-swordfish-4y7r.squarespace.com/config/

Hello, 

On my mobile website the Instagram icon is too big in the footer. What CSS code do I need to make social icons smaller in mobile only? Thank you.

Password: littlemoon (lowercase)

Your site is private, pls provide a temp password to have a look

Hello bangank36. Sorry about that. 

Site URL: https://sealion-swordfish-4y7r.squarespace.com/config/

My password: littlemoon  (lowercase)

53 minutes ago, davidhunternyc said:

Hello bangank36. Sorry about that. 

Site URL: https://sealion-swordfish-4y7r.squarespace.com/config/

My password: littlemoon  (lowercase)

You may want it like this:

To add CSS, go to Design -> Custom CSS
 

@media screen and (max-width: 768px) {
 

@media screen and (max-width: 768px) {
    .header-menu-actions-action--social {
        left: -20px;
        position: relative;
    }
    .header-menu-actions-action--social .icon--lg {
        width: 20px;
        height: 20px;
    }
}

Now that is odd indeed. I inserted your custom code and the icon disappeared? Could it be because I'm using Safari? 

4 minutes ago, davidhunternyc said:

Now that is odd indeed. I inserted your custom code and the icon disappeared? 

 

I thought the icon only display on the mobile menu expand?

Doh !!! I am so sorry. This is my fault entirely. Yes! You're right. When the menu expands the Instagram icon looks perfect! Thank you! 

Now I need lots of other help. I am trying to justify the text in my paragraphs but no code seems to work.

Also, one more thing. I centered the the menu and instagram icon so I can show you that the icon is not centered under the menu. How do I center the social icon? Thanks... as always !!!

O.K. I think I did it. I changed the code to " right: -5 px "