Help with Responsive Header

Community Forums Forums General Discussion Help with Responsive Header

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  angieatc 5 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #92484

    angieatc
    Participant
    Post count: 80

    Myself and responsive designs do not agree at times. Sometimes it clicks right away and sometimes it doesn’t. This time it does not.

    I need some help with my smaller headers (320 & 240). What am I missing? I am getting double headers for these 2 sizes.

    Thanks

    http://test.strosgirldesigns.com/
    #93437

    Susan
    Moderator
    Post count: 8942

    Angie:

    It looks like you still have LogoX2.png in your stylesheet. You’ll need to replace that with your own image.

    Here’s a tutorial which Lindsey wrote on creating responsive headers for the theme.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #96259

    angieatc
    Participant
    Post count: 80

    Thanks Susan, but that logox2 is an image I have changed to a different image that goes with the site.

    #96261

    Susan
    Moderator
    Post count: 8942

    Angie:

    Here’s what I’m seeing in your stylesheet:

    Media Queries
    —————————————————————————————————- */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    .header-image .site-header .wrap {
    background: url(images/LogoX2.png) no-repeat left;
    background-size: 300px 164px;
    }
    }

    Here’s the image that I’m seeing on your site for LogoX2:

    http://test.strosgirldesigns.com/wp-content/themes/modernbloggerpro/images/LogoX2.png

    Did you add another image to your zip file or theme’s image’s folder called LogoX2.png? You should double check that you have the name correct (make sure you have Logo with an upper-case L, and an upper case X)


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    • This reply was modified 5 months, 3 weeks ago by  Susan.
    • This reply was modified 5 months, 3 weeks ago by  Susan.
    #96264

    Susan
    Moderator
    Post count: 8942

    Angie:

    I found your other image:

    http://test.strosgirldesigns.com/wp-content/themes/modernbloggerpro/images/Logox2.png

    You need to update your stylesheet to reflect that you have called it Logox2.png, NOT LogoX2.png, as in your stylesheet


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #96267

    angieatc
    Participant
    Post count: 80

    OK, I changed some things around but I never had your code you just posted:

    .header-image .site-header .wrap {
    background: url(images/LogoX2.png) no-repeat left;
    background-size: 300px 164px;
    }
    }

    But now I have a huge spaces and part of the header is being cut off. I am so confused now. I tried Lindsey’s tutorial and that did not work for me so I tried Jessica’s on another site and that is what I used but I am missing something!

    This is what I have now:

    @media only screen and (max-width: 480px) {
    .header-image .site-header .wrap {
    background: url(images/logo480.png) no-repeat left;
    height: 262px;
    width: 480px;
    }

    @media only screen and (max-width: 320px) {
    .header-image .site-header .wrap {
    background: url(images/logo320.png) no-repeat left;
    height: 94px;
    width: 320px;
    }

    @media only screen and (max-width: 240px) {
    .header-image .site-header .wrap {
    background: url(images/logo240.png) no-repeat left;
    height: 70px;
    width: 240px;
    }

    and it is still not messing up.

    (I edited the post to put this code in here).

    • This reply was modified 5 months, 3 weeks ago by  angieatc.
    • This reply was modified 5 months, 3 weeks ago by  angieatc.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.