Icon Sizes on Mobile

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

I was wondering if it were possible to maintain the XL size of social icons for my desktop browser, but change it to Large just for the mobile version within my banner/header and footer sections so that they fit the screen correctly?

Keep in mind I have another icon in the shows/tour section of the site that I would like to remain untouched if at all possible. The size of that icon is perfectly okay.

Any solutions to this would be greatly appreciated.

Add to Home > Design > Custom CSS

/* resize social icons */
@media screen and (max-width:767px) {
/* banner icons */
div#block-yui_3_17_2_1_1593299968496_10808 a {
    width: 20px;
    height: 20px;
}
/* footer icons */
div#block-yui_3_17_2_1_1593824945966_46865 a {
    width: 20px;
    height: 20px;
}
}

8 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* resize social icons */
@media screen and (max-width:767px) {
/* banner icons */
div#block-yui_3_17_2_1_1593299968496_10808 a {
    width: 20px;
    height: 20px;
}
/* footer icons */
div#block-yui_3_17_2_1_1593824945966_46865 a {
    width: 20px;
    height: 20px;
}
}

 

Thank you it worked!