Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 20, 2018 at 5:39 pm #975394
    ac

    Hi, I would like a very light grey background over the entire sidebar, all the way to the right and the bottom. I’ve tried a lot of solutions from other threads, but none satisfactory. One overflowed the left, one shrank the form content, one added a scrolling mechanism if the page was shorter than the sidebar…

    Code I have in right now is .sidebar{background:#f9f9f9;}

    Please help me get that all the way to the right and bottom!

    Thank you

    June 20, 2018 at 11:01 pm #975549
    Basilis

    Hey andrea,

    Please add the following code

    @media only screen and (min-width:767px) {
#main .container_wrap_first > .container {
padding-right:0!important;
}
.sidebar {
	position: absolute;    
    top:0;
    left:0;
    padding-left:30px!important;
    bottom:0;
    max-width:calc(25% - 50px);
    background:#f9f9f9;
}}

    and let us know if that does solve the issues.

    Best regards,
    Basilis

    June 21, 2018 at 11:11 am #975746
    ac

    Thank you, but unfortunately that didn’t work, it pushed the sidebar to the left instead of right, leaving a blank sidebar on the right hand side. Link to screenshot in private area.

    June 22, 2018 at 8:28 am #976137
    Ismael

    Hi,

    Thanks for the update.

    This css code should do the trick.

    @media only screen and (min-width: 768px) {
.container_wrap.sidebar_right:before {
    content: '';
    display: block;
    position: absolute;
    right: 25px;
    top: 0;
    background: #f9f9f9;
    height: 100%;
    width: calc(24%);
}
}

    Don’t forget to remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    June 22, 2018 at 10:11 am #976203
    ac

    Thanks Ismael, nearly there, but still a bit of a gap down the right hand side. I’ve tried tweaking it, but not managed to fix…

    June 22, 2018 at 11:14 am #976243
    Nikko

    Hi ac,

    Can you try adding this code:

    @media only screen and (min-width: 768px) {
  .responsive .sidebar_right .container {
    display: flex;
  }

  .responsive .sidebar_right .container .sidebar {
    width: 24% !important;
  }
}

    Best regards,
    Nikko

    June 22, 2018 at 1:26 pm #976314
    ac

    Sorry, I’ve got a bigger gap to the right now, I’m afraid that has not worked.

    June 23, 2018 at 9:12 am #976857
    Nikko

    Hi ac,

    The sidebar width set to 24% should have prevented it from expanding.
    Can you give us admin access? so we can try to adjust the code.

    Best regards,
    Nikko

    June 23, 2018 at 10:41 am #976872
    ac

    Thanks Nikko, credentials in private area below.

    June 24, 2018 at 8:38 pm #977198
    Basilis

    Hi,

    You are done :-)
    Make sure you clear cache!

    Best regards,
    Basilis

    July 10, 2018 at 12:58 pm #983631
    ac

    Hi, sorry for the delay in reply. I’m afraid I’m still not seeing the grey go all the way to the edge on the right hand side. It stops in line with the contact form but I want it all the way across as a background for the entire column.

    I’ve cleared cache and checked both chrome and firefox.

    July 11, 2018 at 5:11 am #984012
    Rikard

    Hi,

    Please try this CSS to see if you have any luck with it:

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

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

    Best regards,
    Rikard

    July 11, 2018 at 1:46 pm #984221
    ac

    Fabulous – it works!!! Thank you.

    Full code for this is now as below – also copying for other users’ reference. Is there any of this I can delete as it’s quite long, not sure what all the various bits do now (but at last it works!!)

    .sidebar{background:#f9f9f9;}

    @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;
    }

    July 11, 2018 at 3:06 pm #984241
    Nikko

    Hi ac,

    Glad that Rikard helped you :)
    Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

    July 11, 2018 at 5:07 pm #984296
    ac

    Feel free to close the thread, thanks.

    July 12, 2018 at 6:44 am #984520
    Rikard

    Hi,

    Great, glad we could help and thanks for sharing your solution. I’ll close this for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Sidebar background colour’ is closed to new replies.