jca

Customer
When adding "Social Links" to the custom footer in Flat Awesome+ 2.2.8, they disappear on mobile devices (such as an iPhone).

  1. Screenshot of custom footer with "Connect with us" heading but missing icons in the custom footer block 4
  2. Screenshot of custom footer with "Connect with us" social media icons appearing as they should
  3. Screenshot of likely cause of the bug -- social media "Share" ("Share this page") widget in sidebar (see explanation below)

IMG_7052.PNG
IMG_7053.PNG
IMG_7054.PNG


It looks like the issue is the Social links in the custom footer are using the same css classes as the Share widget (ex: shareButtons-button class), so on mobile views, the Share widget is adding the is-hidden class to the icons in the sidebar, but they are also making the icons disappear (not as intended) in the footer as well. If I visit a page without the Share widget, the social media icons appear as intended.

I assume a fix/tweak would be for the custom footer to use it's own social media icon css classes that aren't targeted by hiding via the Share widget?

Note: This bug only appears on actual devices, not in a desktop browser in "Responsive Design" mode showing the smaller viewports.

Can you help with this issue?

Thanks.
 
I'll look into this. XF changes the functionality of the share buttons when viewing from a mobile device.

My question, did you do something different to get the results from 1/2 screenshots?
 
  • Like
Reactions: jca
My question, did you do something different to get the results from 1/2 screenshots?
Yes, the second screenshot (showing the social media icons as intended) is a page WITHOUT the share widget in the sidebar. (Sorry I didn't make that more clear.)

Thanks for looking into this.
 
Alright, there were actually two bugs here I've corrected for the next release.

If you used the share this page block in the footer, the color would blend into the background so you wouldn't see it.

Then, with the connect with us social block, the links were being hidden. I've essentially added a HTML wrapper around the block and some CSS to show those links.

This CSS for now would do the trick for you I think.

Code:
.p-footer-custom .shareButtons-button.is-hidden { display: block;}

My official fix is a little more complex in case someone wanted to use the share this page and connect with us (which would be weird but just in case).
 
  • Like
Reactions: jca

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back