Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1115084

    Hi guys,

    Just wondering if you could let me know how I can reduce the default space between the columns on some of our pages (links bellow)… They are the columns with the green icons. I would like them to be closer together possible.

    Also, if we have the same situation on subsequent pages, how I can adjust the spacing as needed?

    Thank you! =))

    #1115215

    Hey daisypaws,

    First please try to turn on custom css class field, you can check how to do it here: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements
    Then on the Color Section, edit it and add Custom CSS Class, you can put any value, just for this example I’ll call it my-section (you can use the same on other pages).
    For the first link, this css code will work:

    #top .my-section .av-equal-height-column-flextable .av-flex-placeholder {
        width: 1%;
    }

    The default value is 6%, this works for equal height columns.
    For the second link since it’s not equal height columns and uses 1/4, this code should work:

    #top .my-section .av_one_fourth {
        width: 24.25%;
        margin-left: 1%;
    }
    
    #top .my-section .av_one_fourth.first {
        margin-left: 0;
    }

    Hope it helps.

    Best regards,
    Nikko

    #1115317

    Thanks Nikko,
    I’m a total newbie at wordpress, this is my first site so bear with me!

    I did as you said but no change seemed to happen in either case.

    So for each of the 2 color sections I called the section my-section in the section ID field and then pasted the code you gave me into the custom css field below it. Is that right?

    I hard-refreshed Chrome but could not see any change in spacing between columns.
    Help please! =))

    #1115331

    Hi daisypaws,

    No worries, the code I gave will not work on section ID.
    I have moved my-section from Section ID to Custom CSS Class.
    Then in Enfold Child > General Styling > Quick CSS, I added those css codes (sorry I didn’t give any instructions on where to put these codes)
    I have to temporarily disable css merging and minification since it still fetches the older code if it’s enabled (this is in Enfold Child > Performance).

    Best regards,
    Nikko

    #1115347

    Thanks so much!
    Do I need to re-enable css merging?
    =))

    #1115349

    Hi daisypaws,

    I think you can but if it fetches older css then I think just give it maybe a day to enable it again.

    Best regards,
    Nikko

    #1115350

    ok, thanks again for your help, all working well! =))

    #1115356

    Hi daisypaws,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

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