Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 17, 2020 at 9:46 am #1268052
    yampieters

    Hello, of course one can use a Content Section to get this nice full width coloured background.
    But what if there is a menu or widget at the left side in the sidebar?
    Now one can not use the Content Section. So, ive tried via cell changes, but youll keep on having this margin.
    Is there a way to get a full coloured background up till the left sidebar?
    best regards, jelle

    December 18, 2020 at 4:02 pm #1268448
    yampieters

    got this far

    Under Developer ive put a Custom CSS Class named “kleur”
    In the Quick Css ive put

    /* kleurachtergrond row*/
.kleur {
margin-right: -50px !important;
margin-left: -50px !important;
color: green;
padding-left: 50px !important;
}

    now its almost alright, but the right side is refusing…

    Bloemenweide

    December 20, 2020 at 10:34 pm #1268885
    Mike

    Hi,
    Sorry for the very late reply and thanks for the links.
    Please try this css instead:

    #top #main .kleur {
	left: -5% !important;
    min-width: 111% !important;
    color: green;
    padding-left: 50px;
}

    Best regards,
    Mike

    December 21, 2020 at 12:16 pm #1268992
    yampieters

    Thanks a lot Mike.
    1. On mobile i see equal margins now left and right, whick looks nice.
    but on my pc i saw a small margin on the left but on the right no margin….
    the solution for this was correct the
    left: -5. !important; to left: -5.5% !important;

    2. But now making two colums might be tricky…
    as the problem was i still wanted two columns, so i had to add extra css, but i dont think this will effect the margins.
    But it does effect the way the blocks are displayed on a mobile…that is: they dont display below each other but next to each other, which looks rather messy. can i tell the mobile phone to display them below each other?
    can this be solved?

    <div class="row-natuur">
<div class="column-natuur">your text</div>
<div class="column-natuur">your text</div>
</div>

    in the css i put:

    .column-natuur {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row-natuur:after {
  content: "";
  display: table;
  clear: both;
}

    best regards, jelle

    • This reply was modified 3 years, 9 months ago by yampieters.
    December 22, 2020 at 1:13 pm #1269307
    Mike

    Hi,
    Thank you for the feedback, please try this css to make the columns brake on mobile:

    @media only screen and (max-width: 767px) { 
#top #main .column-natuur {
    width: 100% !important;
}
}

    This should work as-is, but I would recommend that you adjust your css above so the width is also in a media query, like this:

    @media only screen and (min-width: 768px) { 
#top .column-natuur {
    width: 50%;
}
}

    In my test for mobile the two columns look like one long paragraph, so you might want to add some padding to the first one like this:

    @media only screen and (max-width: 767px) { 
#top #main .column-natuur {
    width: 100% !important;
}
#top #main .column-natuur:nth-child(1) {
	padding-bottom: 10px;
}
}

    While this works, I would recommend changing the classes to add “first” & “last” to the columns, just to make styling easier in the future.

    <div class="row-natuur">
<div class="column-natuur-first">your text</div>
<div class="column-natuur-last">your text</div>
</div>

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 16, 2021 at 6:33 pm #1288593
    yampieters

    you can close this ticket, thanks

    March 17, 2021 at 10:24 am #1288682
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘get coloured background full width with menu on the left’ is closed to new replies.