Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 21, 2024 at 8:00 pm #1437816
    blaisen

    I have a color section at the bottom of my page right before the footer. I have unsuccessfully tried a number of ways to have a small gap (5-10 px) between the two areas. I tried adding a Whitespace separator but that comes with padding that opens the gap too wide. I tried adding margin to the color section, but it didn’t do anything. I tried adding a line with CSS formatting, I could not make that work either. This seems so simple, but I’m just not getting it right. Please help: https://ibb.co/hByqwDr

    PS. I submitted a separate ticket regarding the alignment of the social logos.

    March 22, 2024 at 10:19 am #1437994
    Rikard

    Hey Blaise,

    Your firewall is blocking access to the site, please deactivate it for now.

    Sorry 83.233.188.233, your request cannot be processed.
    For security reasons, it was blocked and logged.

    NinjaFirewall

    If you believe this was an error please contact the
    webmaster and enclose the following incident ID:

    [ #4004051 ]

    Best regards,
    Rikard

    March 22, 2024 at 5:15 pm #1438023
    blaisen
    This reply has been marked as private.
    March 23, 2024 at 4:33 pm #1438055
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-110914 #after_section_2 {
  padding-bottom: 30px;
}

    Best regards,
    Rikard

    March 23, 2024 at 10:39 pm #1438093
    blaisen

    Rikard, Unfortunately, this code did not work. Also, since this uses a page ID, it seems that it would be a problem if needed on additional pages.

    And while asking about this, I also have a similar need on some pages to have a gap between the header and a color section used at the top. https://ibb.co/25wcDSh

    I tried this, but it causes issues with portrait mode: placed a color section and inserted a whitespace module set to 5 height. Then I added this CSS to remove the extra padding:
    .avia-section {
    min-height: 0!important;
    }
    It works in desktop mode, but in responsive mode, it causes the color section to under-lap the header. I hope there’s a more elegant way, as I’m also concerned that just calling out the class “.avia-section” could effect other things.

    So I need a CSS fix for both that can work on any and/or all pages in the site that also is OK with a responsive design. Thanks.

    • This reply was modified 9 months ago by blaisen.
    March 25, 2024 at 12:34 pm #1438267
    Rikard

    Hi,

    Please try this CSS instead:

    #footer {
  border-top: 20px solid white;
}

    Best regards,
    Rikard

    March 25, 2024 at 6:47 pm #1438295
    blaisen

    Thank you. That worked!

    March 25, 2024 at 11:18 pm #1438313
    Mike

    Hi,
    Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Separation between Color Section and Footer’ is closed to new replies.