Archived topic

Spacing on mobile items

7 replies · Started by Rudy Vaughn on February 23, 2017

Viewing posts 1–8 of 8

February 23, 2017 at 3:28 pm #283212

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.

Mobile space example

February 23, 2017 at 4:11 pm #283219

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.

February 23, 2017 at 4:28 pm #283225

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

February 23, 2017 at 4:36 pm #283227

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.

February 23, 2017 at 4:48 pm #283231

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

February 23, 2017 at 4:51 pm #283233

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

Let me know if that works.

February 23, 2017 at 5:08 pm #283240

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

February 23, 2017 at 5:20 pm #283241

You're very welcome :)

This archived topic is closed to new replies.

Start building better websites today.