Custom Simple Social Icons responsiveness

[tornado]

Hello!

I have added my own icons to the Simple Social Icons plugin as can be seen here.

The problem is, on an iPhone (for example), the icons cover the logo in the header.

How can I make this Header Right widget (where the Simple Social Icons is used) responsive to avoid this horror?!

Any help would be great. I did get this working a treat for another site thanks to another StudioPress user (see here) but it doesn't work for this site.

It's driving me crazy!

Thanks.

Graeme

http://chiauk.com/

[Lauren @ OnceCoupled]

Hey Graeme,

The code from your previous post works for that specific site because it's targeting the ID of the widget. In HTML, classes can be applied to multiple elements. IDs only to a single element. So, each widget is given a unique ID. In the case of your previous site, it was #simple-social-icons-2. However, your new site's widget is #simple-social-icons-3. You need to update your styles accordingly.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[tornado]

Lauren - who's amazing? You're amazing!

Thank you so much for this. So good.

I learnin'!

Could I ask - how do I figure out the ID? I used Firebug before I sent this ticket because I thought it may have something to do with an ID, but couldn't find anything.

Cheers.

Graeme:)

[Lauren @ OnceCoupled]

Firebug should do the trick. Sometimes there are some nested classes and IDs, so it's just a matter of becoming familiar with the usual structure. Have a look again and you'll probably find it!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[tornado]

Thanks!!!!!!!!!!

[Author]

Posts