Header not responsive on mobile (rest of site okay)

[Jackiejoh]

Hi there,

I could use some help. My site is mobile responsive, but my logo is not when looked at vertically on a smart phone. Horizontal, computer and tablet screens are all fine. But the mobile vertical is screwy. I've tried adjusting the size in php and it didn't help. Any thoughts?

http://finallywriting.com

Thank you!

Jackie

http://finallywriting.com

[ninjamonk]

The issue is the image is not scaling down in size.

I got it to work with background-size:contain;

however what I would add a style to the media query for mobile with a much smaller logo.

[Jackiejoh]

Hi Ninjamonk, thanks for your help!

I tried the background-size: contain; under @media area, but it didn't change anything. Is there another area I would add or adjust this?

Also, here is what my @media currently looks like (I removed some of the in between code for easier reading). Could you take a peek and let me know where (and what specifically) you would add the style for a smaller logo?

Thanks tons!!

@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-size: 320px 164px;
}

}

@media only screen and (max-width: 1139px) {

.site-inner,
.wrap {
max-width: 960px;
}

@media only screen and (max-width: 1023px) {

body {
background-color: #fff;
}

@media only screen and (max-width: 767px) {

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

}

@media screen and (max-width: 480px) {
.custom-landing .landing-two,
.custom-landing .landing-three {
margin: 0;
padding: 0;
width: 100%;
max-width: 300px;

}

@media screen and (max-width: 240px) {

.utility-bar {
display: none;
}

.landing-widgets {
width: 100%;
max-width: 200px;
}

#genesis-responsive-slider {
display: none;
}

}

@media only screen and (max-width: 1139px) {

[ninjamonk]

Ok, couple of things looking at the page and image that is being used.

The image being used is http://finallywriting.com/wp-content/uploads/2015/08/cropped-cropped-header-small-011.png

For mobile I would set the min-height to auto

.header-image .site-header{
min-height:auto;
}

for desktop it looks blown out and blurry.

might I suggest, this will end up with the image scaled correctly but it might look a bit small. Still so you might want to create an image that fits the full width and then let it scale down with the browser.

.header-image .site-header{
min-height:auto;
margin-top: 15px!important;
}

[Jackiejoh]

Thanks for your help! Got it all figured out.

[Author]

Posts