Changing the background image for tablet view Magazine Theme

[perplexed]

Hi, I'm trying to change the background image on the main content for tablet view. Here's the site: http://greenhousegraphix.com/crunchy/

This is the CSS that contains the background image:

.sidebar-content #content-sidebar-wrap {
width: 960px; background: url(images/crunchy-background.jpg);
}

I made a second background image, and added this into the responsive section:

/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 960px) {
.sidebar-content #content-sidebar-wrap {
background: url(images/crunchy-background-TABLET.jpg);
}

I even added it here to see if it changed:

@media only screen and (max-width: 600px) {

.sidebar-content #content-sidebar-wrap {
background: url(images/crunchy-background-TABLET.jpg);
}

 

No luck on tablet or phone view. What am I doing wrong?

Thanks.

 

[ramseyp]

Hi there,

If your CSS is exact, you're missing a closing bracket. This:
@media only screen and (max-width: 960px) {
.sidebar-content #content-sidebar-wrap {
background: url(images/crunchy-background-TABLET.jpg);
}

Should be

@media only screen and (max-width: 960px) {
.sidebar-content #content-sidebar-wrap {
background: url(images/crunchy-background-TABLET.jpg);
}
}

Additionally, your layout appears to be "content-sidebar", so your CSS should read .content-sidebar #content-sidebar-wrap

Cheers!

Pat

---

Community • Work • Conversations

[perplexed]

Thank you,

The code was an excerpt, the closing bracket was down a ways. Thank you for pointing out my mistake in the class name. I'm not sure how I got the name reversed, and am sure I would have kept looking past it. Thanks again!

[Author]

Posts