Cannot add a css class to WPBakery icons

Home › Forums › Jevelin Theme › Cannot add a css class to WPBakery icons

Home › Forums › Jevelin Theme › Cannot add a css class to WPBakery icons

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    NOT RESOLVED Posts

  • iarla
    Participant

    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

    Shufflehound
    Moderator

    Hi there,

     

    Can you please let us know which exact element are you using?

     

    Best regards,

    Shufflehound team

    iarla
    Participant

    I am using the WPBakery Icon element

    Shufflehound
    Moderator

    Got it!

    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?

    iarla
    Participant

    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)

    Screenshot:

    Shufflehound
    Moderator

    Hi there,

     

    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. 🙂

     

    Best regards,

    Shufflehound team

    iarla
    Participant

    Hi,

     

    Thanks for getting back to me.

    Is this Beta version a stable build?

     

    Thanks,

    Iarla

    Shufflehound
    Moderator

    Should be fine as currently there are only two changes different from the latest stable version.

    iarla
    Participant

    Hi,

     

    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.

     

    Thank you,

    Iarla

    Attachments:
    You must be logged in to view attached files.

    iarla
    Participant

    Hello,

     

    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,

    Iarla

    Shufflehound
    Moderator

    Hi there,

     

    That is great that we have at least some kind of progress.

    Can you please create a new page with minimal content (where we can see the issue), so we can test it and try some fixes?

     

    Best regards,

    Shufflehound team

    • This reply was modified 1 year, 4 months ago by Shufflehound.

    iarla
    Participant

    Hi,

     

    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,

    Iarla

    Shufflehound
    Moderator

    Hi there,

     

    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.

     

    Best regards,

    Shufflehound team

    iarla
    Participant

    That’s perfect, thanks very much for the help.

    Shufflehound
    Moderator

    We are glad that it worked! 🙂

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)