.

This one is for the sidebar heading background color:

#sidebar > div.box h3, #sidebar.default > div.box h3 {
background: #004E78; /* sidebar heading background */
text-shadow: 0px -1px 0px #181818;
}

#sidebar h3 a {
color: #fefefe; /* sidebar heading link color */
}

The default of the text shadow is red, too, so I put the text-shadow line there in case you feel like you need to change to change it to something else).

The default heading link color is also a dark color. It’s hard to read dark-color text on dark-color background. So I add it there to change it to lighter color.

You can create a child theme and place the code at the bottom of the style.css of the child theme. Instruction here: http://codex.wordpress.org/Child_Themes

If that sounds too troublesome, you can use plugins like Jetpack or Simple Custom CSS.

• Jetpack has many features; custom CSS is only one of them. After installing and connecting it to your WordPress.com account, you need to activate the Custom CSS module in Jetpack settings to access the extra option in Appearance –> Edit CSS. Copy-paste my code in there.
• Simple Custom CSS is just that: simple. After installing, you’ll see the custom css area in Appearance –> Custom CSS. Simply copy-paste my code in there.

Jetpack is an official plugin from WordPress. It has many features, one of which is a Custom CSS. After installing, configuring, and activating the module, you can go to Appearance –> Edit CSS –> copy-paste my code there.

Simple Custom CSS is another plugin that does only Custom CSS. After installed, you can go to Appearance –> Custom CSS –> copy-paste my code there.

Try adding this to your custom CSS:

#footer {
background: #E1E6E6;
}

If the issue is resolved, could you please mark this thread as “resolved”? That would be much appreciated! 🙂

Thank you

If you’re unable to setup a child theme and have issues with Jetpack , you can try Simple Custom CSS.

Like its name suggest, it’s simple. After install and activate it, you can go to appearance –> custom css –> copy-paste my code there.

If you dislike using plugins, you can create a child theme and copy-paste that code to the bottom of style.css of the child theme. Instruction here: http://codex.wordpress.org/Child_Themes

If you’re okay with using plugins, WordPress themselves have an official plugin call Jetpack. It has many features and custom CSS is one of them. Once installed and configured, you can copy-paste the code to Appearance –> Edit CSS.

@theme Author, it isn’t working properly on your demo either. This is what I see when viewing demo: http://i.imgur.com/rurJloe.png. Notice that everything is responsive but not the post content.

—-

Back to the question, it’s probably because the width isn’t set properly on smaller screens.

Please add this code to your custom CSS and see if that works:

@media (max-width: 767px) {
#primary {
max-width: 100%;
}
}