Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 27, 2016 at 11:28 am #622927
    Wendy

    Hi, I’ve tried to enter this code into my custom css, but the backgroundcolor keeps flooding into my main content.

    @media only screen and (min-width: 768px) {
    .container_wrap.sidebar_right{
    background:-webkit-gradient(linear,right top,left top,color-stop(#f1f1f1,0.295),color-stop(white,0));
    background:-webkit-linear-gradient(right, #f1f1f1 29.5%, white 0%);
    background: -moz-linear-gradient(right, #f1f1f1 29.5%, white 0%);
    background: -o-linear-gradient(right, #f1f1f1 29.5%, white 0%);
    background: linear-gradient(right, #f1f1f1 29.5%, white 0%);
    }
    }

    April 27, 2016 at 12:48 pm #622981
    Josue

    Hi Wendy!

    I’m not sure if that code is expected to work in fluid layouts where the content/sidebar width varies depending of screen size.

    Best regards,
    Josue

    April 27, 2016 at 1:02 pm #622998
    Wendy

    Okay, is there any other solution? Should I fix the layout width?

    April 27, 2016 at 3:00 pm #623129
    Josue

    Hey!

    What are you trying to achieve? the link you posted is returning a coming soon page.

    Regards,
    Josue

    April 27, 2016 at 3:23 pm #623146
    Wendy

    I’m sorry… Try this one.

    April 28, 2016 at 12:47 pm #623652
    Josue

    Use this code instead:

    #top .container_wrap.sidebar_right .sidebar{
    background: gray;
}
#top .container_wrap.sidebar_right .sidebar .inner_sidebar  {
    padding-right: 50px;
}

#top .container_wrap.sidebar_right .container {
    padding: 0;
}

#top .container_wrap.sidebar_right  .entry-content-wrapper {
    padding-left: 50px;
}
    April 30, 2016 at 6:29 am #624858
    Wendy

    Hi Josue, thank you for your reply! :)

    The sidebar however doesn’t go all the way down to the footer. Check the link below. Is there another code for editing this problem? Thank you!

    April 30, 2016 at 11:15 am #624917
    Josue

    Use this code instead:

    #top .container_wrap.sidebar_right {
    background: #d6d6d6;   
}
#top .container_wrap.sidebar_right .sidebar{
    background: transparent;
}
#top .container_wrap.sidebar_right .sidebar .inner_sidebar  {
    padding-right: 50px;
}

#top .container_wrap.sidebar_right .container {
    padding: 0;
}

#top .container_wrap.sidebar_right  .entry-content-wrapper {
    padding-left: 50px;
    
}
#top .container_wrap.sidebar_right .content{
    background: white;
}
    April 30, 2016 at 11:57 am #624940
    Wendy

    I’m sorry to bother you again… Now the background color seems to flow into my main content again… :(

    • This reply was modified 8 years, 6 months ago by Wendy.
    April 30, 2016 at 1:12 pm #624969
    Josue

    Hi,

    Change the #top .container_wrap.sidebar_right .content part to:

    #top .container_wrap.sidebar_right .content{
background: white;
min-height: 750px;
}

    Best regards,
    Josue

    April 30, 2016 at 1:20 pm #624978
    Wendy

    Thanks, this one works PERFECT! :))

    April 30, 2016 at 1:34 pm #625000
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    May 1, 2016 at 12:13 pm #625312
    Wendy

    Hi Joshue, I’m sorry to bother you again. The website is fully up and running, but I discovered that the responsive version of the website on the iPhone is having some trouble with the padding of the sidebar. Could you please check? Thank you.

    May 1, 2016 at 1:00 pm #625318
    Josue

    Hi,

    No bother at all, just change the whole code to this:

    @media only screen and (min-width: 767px) {
	#top .container_wrap.sidebar_right {
		background: #d6d6d6;   
	}
	#top .container_wrap.sidebar_right .sidebar{
		background: transparent;
	}
	#top .container_wrap.sidebar_right .sidebar .inner_sidebar  {
		padding-right: 50px;
	}

	#top .container_wrap.sidebar_right .container {
		padding: 0;
	}

	#top .container_wrap.sidebar_right  .entry-content-wrapper {
		padding-left: 50px;

	}
	#top .container_wrap.sidebar_right .content{
		background: white;
		min-height: 600px;
	}
}

    As you’re hiding the sidebar on mobile we can set these changes to apply only on desktop.

    May 1, 2016 at 1:32 pm #625324
    Wendy

    Ha! That’s it! Thanks! :D

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