Need help? Check out our Support site, then


twenty twelve random image header not working on mobile - part 2

  1. Hello, a couple of months ago I was working on a wordpress site and with the help of a great staffer, I was able to create some custom CSS to fix a problem I was having with getting my custom headers to appear on the mobile theme version of this site.

    here is a link to that support thread: http://en.forums.wordpress.com/topic/twenty-twelve-random-image-header-not-working-on-mobile

    The problem was that when I chose "random" for my headers they would not show up at all on the mobile theme at all. With her help I was able to write some custom CSS that would tell the mobile them a specific header image to be shown for each page.

    The other day, I purchased my approved stock imagery and uploaded the new image files to my media library (and renamed the paths in my CSS to reflect the new image names) but now nothing is showing up on the mobile theme again.

    I've been going over the CSS and my old support thread for a while now and I can't figure out what changed that is causing this to not work anymore.

    If anyone has an idea, i'd very much appreciate your insight.

    -Kyle

    The blog I need help with is robtco.wordpress.com.

  2. Using http://robtco.com/about-robtco/ as an example, I checked the page with my iPhone and I can see a custom header image which is different from the one on the home page right now. It's possible you fixed the issue on your own. (?) If you're still having trouble, could you please provide and example link to a page where it's not working for you and also include a link to the custom header image you expect to see on mobile that isn't working for you?

  3. Hello, and thanks for the reply. I could not figure out how to solve the problem so I disabled the mobile theme. I wanted the mobile theme as it has a much more attractive menu, especially if you have drop downs, which this does.

    I'm baffled by this though. All I did was upload new header images to my media library, deleted the old header images, then updated the CSS to reflect the new paths to the new header images. If you copy and paste the image path from my CSS into a browser... for example:
    robtco.files.wordpress.com/2013/05/copy-banner1.jpg
    The browser sees the image, so I know the path is right. And I know the page IDs have not changed.

    My CSS is below in case you notice something that is obviously wrong:

    <br /> .main-navigation {<br /> margin-top: 1px;<br /> }</p> <p>.site-header h1 {<br /> display: none;<br /> }</p> <p>/*home header*/<br /> .mobile-theme.page-id-2 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner1.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*about us header*/<br /> .mobile-theme.page-id-96 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner21.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*services header*/<br /> .mobile-theme.page-id-19 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner41.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*property header*/<br /> .mobile-theme.page-id-6 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner3.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*association header*/<br /> .mobile-theme.page-id-8 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner6.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*homeowner header*/<br /> .mobile-theme.page-id-13 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner41.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*tenant header*/<br /> .mobile-theme.page-id-10 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner3.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*news header*/<br /> .mobile-theme.blog hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner6.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }</p> <p>/*contact header*/<br /> .mobile-theme.page-id-15 hgroup {<br /> background: url('//robtco.files.wordpress.com/2013/05/copy-banner1.jpg?w=300') center 10px no-repeat;<br /> height: 83px;<br /> }<br />

  4. Ugh... i pasted that code all wrong.

  5. let's try this again...

    .main-navigation {
    	margin-top: 1px;
    }
    
    .site-header h1 {
    	display: none;
    }
    
    /*home header*/
    .mobile-theme.page-id-2 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner1.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*about us header*/
    .mobile-theme.page-id-96 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner21.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*services header*/
    .mobile-theme.page-id-19 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner41.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*property header*/
    .mobile-theme.page-id-6 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner3.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*association header*/
    .mobile-theme.page-id-8 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner6.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*homeowner header*/
    .mobile-theme.page-id-13 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner41.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*tenant header*/
    .mobile-theme.page-id-10 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner3.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*news header*/
    .mobile-theme.blog hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner6.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
    
    /*contact header*/
    .mobile-theme.page-id-15 hgroup {
    	background: url('//robtco.files.wordpress.com/2013/05/copy-banner1.jpg?w=300') center 10px no-repeat;
    	height: 83px;
    }
  6. The url() values look like they're missing the "http:" part of the image links.

    Can you try changing lines like this:

    background: url('//robtco.files.wordpress.com/2013/05/copy-banner1.jpg?w=300') center 10px no-repeat;

    To this?

    background: url('http://robtco.files.wordpress.com/2013/05/copy-banner1.jpg?w=300') center 10px no-repeat;

    I just checked http://robtco.com/about-robtco/ and it does look pretty nice in Twenty Twelve! But I know your goal is to use the mobile theme instead. Maybe could you switch back to the mobile theme for a little while so I can test it with you?

Topic Closed

This topic has been closed to new replies.

About this Topic