Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 2, 2021 at 3:42 pm #1297791
    Martian

    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?

    May 2, 2021 at 7:24 pm #1297803
    Guenni007

    set the max-width and width to 100%

    May 3, 2021 at 4:27 pm #1298058
    Yigit

    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

    May 3, 2021 at 5:27 pm #1298073
    Martian

    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

    May 3, 2021 at 7:25 pm #1298081
    Guenni007

    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
  }
}
    May 3, 2021 at 7:36 pm #1298084
    Martian

    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/

    May 3, 2021 at 11:57 pm #1298099
    Guenni007

    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.

    May 4, 2021 at 3:03 am #1298113
    Martian

    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?

    May 4, 2021 at 8:22 am #1298202
    Guenni007

    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.

    May 4, 2021 at 4:23 pm #1298332
    Martian

    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.

    May 4, 2021 at 4:24 pm #1298333
    Martian

    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.

    May 4, 2021 at 4:36 pm #1298334
    Yigit

    Hi,

    Glad @Guenni007 could help!

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

    Best regards,
    Yigit

  • Author
    Posts
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.