Tagged: , , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 12, 2022 at 3:09 pm #1375954
    Emanon

    Hi guys,

    I added this code to Quick CSS:

    .sidebar{background:#F1F7F8;}

    @media only screen and (min-width: 768px) {
    .responsive .sidebar_right .container {
    display: flex;
    }
    .responsive .sidebar_right .container .sidebar {
    width: 24% !important;
    }
    }
    .sidebar_right .container {
    padding-right: 0 !important;
    margin-right: 0 !important;
    }

    .sidebar_right .sidebar {
    padding-right: 50px;
    }

    I found this code in another thread. It works but there are two things that haven’t worked for me yet.

    1. When I apply the code there is suddenly more space at the left of the image.

    2. There is still whitespace at the right side. I want it to be all green.

    screenshot

    Thanks in advance!

    • This topic was modified 2 years ago by Emanon.
    December 13, 2022 at 5:31 am #1376021
    Ismael

    Hey Alfredo,

    Thank you for the inquiry.

    The issue occurs because of this css code.

    .sidebar_right .container {
padding-right: 0 !important;
margin-right: 0 !important;
}

    You have to set the left and right margin of the container to auto in order to align it to the center of the page.

    .sidebar_right .container {
    padding-right: 0 !important;
    margin: 0 auto !important;
}

    Best regards,
    Ismael

    December 13, 2022 at 11:19 am #1376035
    Emanon

    Hi Ismael,

    Thank you. Issue 1 is solved. But Issue 2 is still there. There is still white space at the right side. How can I turn it green all over?

    Thanks in advance

    December 15, 2022 at 7:40 pm #1376291
    Mike

    Hi,
    Thank you for your patience please link to your page with the white space so we can examine and assist with some additional css.
    In my test I found no white space:
    2022-12-15_001.jpeg

    Best regards,
    Mike

    December 16, 2022 at 10:17 am #1376379
    Emanon

    Hi Mike,

    Here’s the link (private content).

    December 16, 2022 at 2:05 pm #1376408
    Mike

    Hi,
    This is because you are using a boxed layout, the space on the right and left is the background of the page.
    Try this css:

    #top #main .container_wrap_first.sidebar_right {
  background: linear-gradient(
    to right, 
    #ffffff 0%, 
    #ffffff 50%, 
    #F1F7F8 50%, 
    #F1F7F8 100%
  );
}
#top #main main {
	background: #fff;
}

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

    Best regards,
    Mike

    December 19, 2022 at 11:47 am #1376682
    Emanon

    Hi Mike, thank you! Looks great. Thread can be closed.

    December 19, 2022 at 12:06 pm #1376685
    Emanon

    Hi Mike! I still have a question. The code works, but when I put this code in Quick CSS a part of my background in the header turns white.

    Take a look at the page in Private content. When I remove the code, the background appears again.

    Thanks in advance.

    December 19, 2022 at 1:50 pm #1376700
    Mike

    Hi,
    Thanks for the login, I changed the css to this:

    #top #main .container_wrap_first.sidebar_right {
  background: linear-gradient(
    to right, 
    #ffffff 0%, 
    #ffffff 50%, 
    #F1F7F8 50%, 
    #F1F7F8 100%
  );
}
#top #main .sidebar_right > .container > main {
	background: #fff;
}

    please clear your browser cache and check.

    Best regards,
    Mike

    February 10, 2023 at 10:07 am #1397419
    Emanon

    It’s been a while, but thanks. It worked. Thread can be closed.

    February 10, 2023 at 12:40 pm #1397442
    Mike

    Hi,
    Glad we were able to 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 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change background color blog sidebar’ is closed to new replies.