Community Forums › Forums › Archived Forums › General Discussion › Help with Responsive Header
Tagged: mobile responsive, modern blogger
- This topic has 5 replies, 2 voices, and was last updated 10 years ago by angieatc.
-
AuthorPosts
-
February 26, 2014 at 10:59 am #92484angieatcMember
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
March 4, 2014 at 4:40 pm #93437SusanModeratorAngie:
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.
March 23, 2014 at 3:45 pm #96259angieatcMemberThanks 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
March 23, 2014 at 3:49 pm #96261SusanModeratorAngie:
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)
March 23, 2014 at 3:54 pm #96264SusanModeratorAngie:
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
March 23, 2014 at 4:12 pm #96267angieatcMemberOK, 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
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.