Changing the background image for tablet view Magazine Theme

Community Forums Forums Design Tips and Tricks Changing the background image for tablet view Magazine Theme

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  perplexed 1 year, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22296

    perplexed
    Participant
    Post count: 3

    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.

     

    #22347

    ramseyp
    Participant
    Post count: 99

    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


    #22415

    perplexed
    Participant
    Post count: 3

    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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.