Help with Responsive Header

[angieatc]

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

---

My design site, Hill Springs Designs

http://test.strosgirldesigns.com/

[Susan]

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.

[angieatc]

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

---

My design site, Hill Springs Designs

[Susan]

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]

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

[angieatc]

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).

---

My design site, Hill Springs Designs

[Author]

Posts