Hi, I’m trying to add a css class to a wpbakery icon as I’m trying to center it on mobile.
There is no field to add a css class, unlike every other element I’ve checked. There is also no option to change the alignment to be different on mobile.
How can I make my icon responsive? Thanks
Can you please let us know which exact element are you using?
We are now testing your website and it seems that the icons are centered on the mobile. Did you manage to fix it?
If not, can you please paste a screenshot of the issue?
No, I have used a temporary work-around of duplicating the entire row. One version is centered, and one is not. One is disabled on desktop and the other is disabled on mobile, so it gives the illusion of being responsive.
As you can imagine this can only be a temporary solution as it introduces unnecessary compexity and any changes to the icons/text must be done twice.
The problem is that there is no field/option to add a css class (or alternatively change aligment on mobile for icons)
We added an icon mobile alignment option in the latest theme beta version below:
Please login to access this file
Please try it and let us know if that fixes the issue. 🙂
Thanks for getting back to me.
Is this Beta version a stable build?
Should be fine as currently there are only two changes different from the latest stable version.
I’ve tried that now, and it works fine when changing my desktop screen to emulate a phone, but it doesn’t work when I try to load it on an actual mobile device.
I’ve attached screenshots of both views.
Also, when an icon is an inline element the only way to change it’s alignment is by changing the text align field of the row it’s in. This is fine, however there’s no way to change that alignmnent for mobile, and adding a css class that changes the text align on mobile doesn’t do anything, even with !important after it. I have also added screenshots of my settings and css for this.
The mobile allignment option now works on the emulator and on an actual mobile device.
My above issue about centering icons when they’re inline elements remains present however.
Thanks for the reply.
The “Contact Footer” page in footers has minimal content so is perfect for testing, I’ve created a duplicate that you can use for trying fixes. The link is attached.
It’s the 3 icons on the right (LinkedIn, Phone, Email), they are inline but don’t respond to changing their alignment through responsiveness settings or any css that I’ve tried.
Thank you for the login details.
We added some tweaks to your custom CSS and it seems that it is working fine now on the mobile devices.