Spacing Between Modules

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Plugin / Spacing Between Modules

This topic is: resolved
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #114747

    Jamie
    Participant

    Hi

    I’m trying to reduce the space between a text editor module and an icon module. I have the top and bottom margins all set to 0 however there’s still quite a gap. (see image links)

    https://drive.google.com/open?id=0BxNhvGSmnqd9bnh0MC1yeEhNQm8

    https://drive.google.com/open?id=0BxNhvGSmnqd9d2xnMC1oTVB2QWs

    Cheers

    Jamie

    #114905

    Ben Carlo
    Keymaster

    Hey Jamie,

    I tried visiting the page in question but I couldn’t find the Text Editor and Icon module combo. Can you create a private test page where we can see the issue so we can check?

    Ben

    #114925

    Jun
    Keymaster

    Hey Jamie!

    Try setting the module setting’s margins and see if that fixes it. The modules are set with a 20 margin on all sides.

    img

    Jun

    #115047

    Jamie
    Participant

    Hi Ben and Jun

    Thanks for the prompt reply. As mentioned above, I have the bottom margin of the text editor and top margin of the icon module set to 0.

    Here is a test page with the Text Editor and Icon module combo:

    http://www.sydneyptcourses.com.au/test-staff-profile/

    Cheers

    Jamie

    #115142

    Ben Carlo
    Keymaster

    Hey Jamie,

    So the problem here is you’ve added custom CSS to add bottom padding to the p tag, and Bootstrap has its own bottom margin added to the same tag as well, and that is what composes the extra space between the 2 modules. Can you give the Text Editor module an extra class so we can target it specifically and remove both the bottom padding and margin?

    .fl-custom-class .fl-module-content p {
      padding-bottom: 0px;
      margin-bottom: 0px;
    }

    The code above should work, just change fl-custom-class to whatever class you’ve added to the Text Editor module.

    Let us know how it goes! 🙂

    Ben

    #115376

    Jamie
    Participant
    This reply has been marked as private.
    #115588

    Ben Carlo
    Keymaster

    Hey Jamie,

    The screenshot below shows the custom CSS applied to the p tag that I was referring to.

    View post on imgur.com

    Okay, so for the code above, you can place it under Appearance > Customize > Code > CSS Code. For the CSS class, you need to apply it to the Text Editor module, and without the dot before it. The CSS code stays as is, but the CSS class you place on the Advanced tab should only be no-padding Give that a shot and let us know how it goes!

    Ben

    #115690

    Jamie
    Participant

    Hey Ben

    Ahhh yes I remember now.

    Yep, that worked a treat, thanks so much for your help! 🙂

    Cheers

    Jamie

    #115708

    Danny
    Keymaster

    Hi Jamie,

    Happy to hear your issue has been resolved and thanks for informing us. We appreciate it.

    Thanks,
    Danny

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

The forum ‘Beaver Builder Plugin’ is closed to new topics and replies.