[Resolved] Spacing on mobile items

[Rudy Vaughn]

Hi Tom,

I’m having an issue with spacing on a mobile view. Using Beaver Builder to add the page elements (text, video) and I’d like to tighten up the margin between these items. On desktop view it looks fine, but when we view on mobile there’s too much space.

I’ve tried my limited CSS and having no luck getting the right selector if that’s the issue.

The demo site is http://engagemedia.tech/setfreejourney/

Uploaded a screenshot for illustration.

This site is being designed for mainly mobile viewing so please excuse the lack of design, because that’s what the client has requested.

[Leo]

Hi Rudy,

Try this CSS:

@media (max-width: 768px) {
    h3 {
        margin-bottom: 0;
    }
    .fl-node-58a3f439c296a > .fl-module-content {
        margin: 0 20px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

I left a bit of space in there but let me know if you want to remove them completely.

[Rudy Vaughn]

Thanks Leo. That took out some space but I think the client wants it removed completely.

[Leo]

Try this:

@media (max-width: 768px) {
    .fl-module-content.fl-node-content {
        margin: 0 20px;
    }
    .fl-node-58a39fbfa5498 .uabb-creative-button-wrap.uabb-creative-button-reponsive-center {
        margin: 5px 0;
    }
}

Let me know.

[Rudy Vaughn]

Leo,

That’s almost got it. We just need a bit of space top and bottom of the “Next Video” button. Is that possible?

Thanks,
Rudy

[Leo]

Adjusted the code above: https://generatepress.com/forums/topic/spacing-on-mobile-items/#post-283227

Let me know if that works.

[Rudy Vaughn]

You are a rock star sir! That’s got it. Thank you very much Leo. I’m marking this as resolved.

[Leo]

You’re very welcome 🙂

[Author]

Posts