Visibility Issue

  • The first module on my landing page doesn’t show up on mobile devices. I’m using Beaver Builder. The module visibility is set to Always. Every other module has the option of “all” instead of “always”. This one does not. Any ideas how I can make sure this module is always seen?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hello @audiofish

    To resolve the visibility issue with the Beaver Builder module, try duplicating the module and setting its visibility to “All” instead of “Always” if possible. If that option doesn’t appear, try adding custom CSS to ensure it’s visible on mobile:

    @media (max-width: 768px) {
    .fl-module { /* replace with the specific class or ID of the module */
        display: block !important;
    }
}

    Alternatively, check for any custom settings or conditions on the module under the “Advanced” settings in Beaver Builder.

    Hank

    (@poku1010)

    @audiofish

    Based on the browser’s element inspection results, the first module’s class (fl-col fl-node-ivo7p4m9hxey fl-visible-desktop-medium) includes fl-visible-desktop-medium. The fl-visible-desktop-medium class is set to display: none; in the CSS when the screen width is below 480px, which is why the first module content is not visible on mobile devices (as shown in the screenshot).

    According to your description, this issue should be resolved by changing the module setting from always to all.

    If that doesn’t work, you could consider forcing the display with CSS. This method will override the plugin settings directly.

    @media (max-width: 480px) {
    .fl-node-ivo7p4m9hxey {
        display: flex !important;
    }
}
    Thread Starter audiofish

    (@audiofish)

    I’m not familiar with CSS. Is that using the standard editor instead of Beaver Builder?

    Hank

    (@poku1010)

    @audiofish

    You can ignore the CSS part.

    Just adjust the settings you mentioned before from?“always”?to?“all”.

    This should solve your problem.

    • This reply was modified 2 weeks, 1 day ago by Hank.
    Thread Starter audiofish

    (@audiofish)

    for some reason, this module doesn’t give the “all” option.

    • This reply was modified 1 week, 3 days ago by audiofish.
    Hank

    (@poku1010)

    If there is no “all” option in the settings, you can try manually setting the Row CSS.

    Row Settings >> Advanced >> CSS

    Paste the following content, and save it to test if it works.

    https://i.imgur.com/2FVg4nt.png

    https://i.imgur.com/zb3XjXL.png

    @media (max-width: 480px) {
        .fl-node-ivo7p4m9hxey {
            display: flex !important;
        }
    }
    • This reply was modified 1 week, 3 days ago by Hank.
    Thread Starter audiofish

    (@audiofish)

    CSS does not display as an option. Import/Export is the last option listed under Advanced.

    Thread Starter audiofish

    (@audiofish)

    I gave up and just created a new row. Thanks for your help!

    I’m sorry I couldn’t help you successfully this time. If you need any further assistance, feel free to let me know! ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.