Grey background on sidebars and behind images with captions

Very nice Website, Lauren! I have the same question as you for my company site, https://www.havebluepower.com

Hi Lauren! Looks tasty there on the website! (Tip: run the regenerate thumbnails plugin once to fix older thumbnail sizes)

For the caption background:

.entry .wp-caption { background: #mycolor; }

The sidebar:

@media only screen and (min-width: 480px) and (max-width: 1200px) {
.s2-expand .s2 { background: #f0f0f0; }
}
@media only screen and (min-width: 480px) and (max-width: 960px) {
.s1-expand .s1 { background: #f0f0f0; }
}
@media only screen and (max-width: 479px) {
.sidebar { background: #f0f0f0; }
}

Then you’d also need to edit /img/sidebar/s-left.png and /img/sidebar/s-right-s2.png and save them with your color. Or all images in the sidebar image folder if you want it to work with all layout options.

There is quite a bit of “css-logic” going on behind the responsive and toggle-able sidebars (gave me a headache to create), so that’s why there are so many different things to change.

hi,

Just a clarification, this is not the same lines as in the child theme,
we need to change the child theme or add these lines in addition?

/* Global */
.mystyle {}

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
    .mystyle {
}

/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
    .mystyle {}
}

/* Mobile - 320px */
@media only screen and (max-width: 479px) {
    .mystyle {
}

thank you

I had to off

.col-3cm .main-inner {background:none;}
.col-3cm .main {background:none;}

otherwise remain gray sidebars
even before they try to

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
.s2-expand .s2 { background:none; background-color: #FFF; }
}

/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.s1-expand .s1 { background:none; background-color: #FFF; }
}

/* Mobile - 320px */
@media only screen and (max-width: 479px) {
.sidebar { background:none; background-color: #FFF; }
}