Jump to content

Icon Sizes on Mobile

Recommended Posts

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.

Link to comment
  • Replies 2
  • Views 979
  • Created
  • Last Reply

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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! 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.