Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #699334

    Hi, I am using Colour Sections to place unique headers on each of my pages. On the desktop, they look perfect. But on mobile devices, there is a large white space between the Colour Section and the content below.
    What is causing that, and how do I remove it?

    (Note: on the home page, I used a Full-Width Easy Slider for the header and it works great. But apparently, it doesn’t work on subsequent pages, because when I tried it, the page became full-width and the sidebar was forced to the bottom.)

    What do you suggest?


    Hey blaaklistwriters!

    Thank you for using Enfold.

    Looks like you have set the background size to “contain” and then applied a minimum height to the color section. On mobile view, in order to preserve its aspect ratio, the background shrinks and it leaves spaces underneath. The workaround is to remove the background image, insert an Image element instead and then disable the Section Minimum Height option.


    This reply has been marked as private.


    Thank you for using Enfold.

    Have you tried setting the “Section Padding” to “No Padding”? That option should remove the vertical spaces above and underneath the color section container. You can also use this css code, but it’s going to affect every color section in the site.

    @media only screen and (max-width: 767px) {
    .content  {
        padding-top: 0;
        padding-bottom: 0;

    Best regards,


    Thank you for your reply.
    I already tried setting the “Section Padding” to “No Padding”.
    I also tried css.
    But not solved.

    Is there any other way?




    Thanks for the update.

    Can you give us a screenshot of the area that you’re trying to remove? Please upload the screenshot to imgur or dropbox.

    Best regards,


    Hello Dear Support!
    I’m curious about your response to this question, so I’m posting my site credentials in the private window. The specific webpage referenced there is the portfolio item that I have changed so that the mobile appearance is better. Basically, I am hiding some of the elements in the left column (back to Work, Related Projects and the associated white separators) on mobile so that the mobile user can get right to the project description after seeing the images in Easy Slider. There is the unfortunate white space after the Color Section on mobile – that is what I would like to remove. Everything looks fine on desktop.

    I am viewing the mobile on an iPhone if that makes any difference.

    Thanks in advance for your help.

    Cheers, Leslie

    • This reply was modified 1 year, 4 months ago by  barrett5.
    • This reply was modified 1 year, 4 months ago by  Basilis.


    For security reasons, please create your own ticket and edit your details there. I have removed them from here.

    Best regards,


    I have the same problem if I add a sidebar in the page.
    I mean:
    no side bar = no white padding neither desktop nor mobile
    with sidebar = white padding only in mobile

    this page

    Can someone help?


    I think i solved with

    /* no top line on container */
    .container_wrap { border-top: none !important; }

    Hey phoenixdivers-kohlanta,

    I’m glad you were able to solve this!

    Best regards,
    Jordan Shannon

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

You must be logged in to reply to this topic.