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

    Hi there, I am trying to work out how to make a color section full width, without having to remove the max-width for the complete page. I’ve found this thread and another one from 2016.

    I have tried the following (#fullwidthsection being my customID), but none of them is working.

    #fullwidthsection .container {
    width: 100%;
    max-width: none;
    }

    .responsive #fullwidthsection .container {
    width: 100%;
    max-width: none;
    }

    .page-id-734 #fullwidthsection .container {
    width: 100% !important;
    max-width: none !important;
    }

    Full width works well for the page title section, but not for the following 2-column section (link below). It did work in the past when I was using an older version of Enfold (link below).

    Can you please help?

    #1297803

    set the max-width and width to 100%

    #1298058

    Hi,

    Thanks for contacting us!

    Please use the code as following as @guenni007 suggested

    #fullwidthsection .container {
    width: 100%;
    max-width: 100%;
    }

    @guenni007 Thanks for your help :)

    Best regards,
    Yigit

    #1298073

    Thanks, guys.

    I have made this change, but unfortunately, it still isn’t working. It appears the section is full width, but the flex column table within the color section isn’t full width. Currently, there’s a gap on the left and on the right-hand side.

    I have tried:
    #fullwidthsection .container {
    width: 100% !important;
    max-width: 100% !important;
    }

    .page-id-734 #fullwidthsection .container {
    width: 100% !important;
    max-width: 100% !important;
    }

    Can you please take another look at it and let me know what I need to change?

    Thanks
    Isabel

    #1298081

    On the alb options of your columns – you had to choose “no space between columns”
    Then on quick css:

    #top #fullwidthsection .container {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

    see here: https://webers-testseite.de/color-section-full-width-container/

    if it is important for you that on responsive case the columns are without space and the full-width is still there:

    @media only screen and (max-width: 767px) { 
      .responsive #top #wrap_all #fullwidthsection .container {
        width: 100%;
        max-width: 100%;
      }
      .responsive #top #wrap_all #fullwidthsection .container .flex_column {
        margin-bottom: 0
      }
    }
    #1298084

    Thanks for your help!
    I’ve tried this and unfortunately it’s still not working.
    I had a look at your example and that’s exactly what’ I’m after. But for me it doesn’t work for some reason
    See here: http://www.welcometofred.com.au/

    #1298099

    Well first of all – i do not see in your css the code from above!
    However, with a look at your page now, I would have recommended using the grid row element anyway.
    It provides the required properties from the start, but does not offer a background image for the entire element per se, which is not necessary in your case.

    Nevertheless – my code from above will work, if it exists. Of course, it could be that you have activated file merging and have not refreshed these merged files after adding the new css codes.

    #1298113

    Thank you so much for your help! The grid row element is doing exactly what I want.

    Why the CSS code didn’t work for me is still a mystery. I use ‘Classic Cache Killer’ for Google Chrome and it’s been ‘on’. I have triple-checked whether the stylesheet is being updated, which it is.

    You mentioned the grid-row element doesn’t offer a background image. I am using images for the subpages and was hoping to create a similar layout: Intro text on the left, image on the right – both columns together being full width. I would be keen to hear what element you would recommend to use?

    #1298202

    for every single cell you can have a background-image – but the whole grid-row element doesn’t have that feature.
    ( on options dialogs ) on quick css you can set this aswell.

    #1298332

    Works a treat! Thanks a lot for your help.

    Ps. The previous code hadn’t been applied because of an unclosed code block further up on my stylesheet. Mystery solved.

    #1298333

    Works a treat! Thanks a lot for your help.

    Ps. The previous code hadn’t been applied because of an unclosed code block further up in my stylesheet. Mystery solved.

    #1298334

    Hi,

    Glad @guenni007 could help!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

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

The topic ‘How to make a color section containing 2 columns full width’ is closed to new replies.