Mobile version of Social Media icons

[DistantLands]

We’ve modified the social media icons that show up using the standard shortcode, and put it in the footer of the site. It works fine on the full version, but when we view the mobile version, the social media icons are different. Can you point me to where in the CSS/files the instructions for the mobile versions of the social media icons can be found?

[David Martin – Support]

Search for SOCIAL SHORTCODE in the CSS file style.css:

/* --------------------------------------------
	SOCIAL SHORTCODE
-------------------------------------------- */

[DistantLands]

This reply has been marked as private.

[David Martin – Support]

You would need to debug your own modifications, but broadly speaking you would need to look at adjusting the background size from the image sprite on the media query. Look for the class below and use the below background-size values as a test.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
ul.social-icons li a {
    background-image: url(images/[email protected]);
    background-size: 644px 32px;
}
}

[DistantLands]

and BOOM, just like that it’s fixed. You guys do great work. You can close this topic. Thanks again-

[David Martin – Support]

Glad to help.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.