Genesis default logo displays on mobile devices

[shellshock]

Hi

I have been working with the Genesis Sample responsive theme to create my own theme.

Problem is the logo defaults on mobile devices to a Genesis Framework logo and isnt showing the one the I placed and that shows ok on the desktop version.

Anyone else have this issue or know how to bug fix?

Thanks
Shelli

[Robin]

Look in your style.css for this block at the beginning of the 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/[email protected]) no-repeat left;
		background-size: 320px 164px;
	}

}

Either replace that logo file with a larger version of your logo and adjust the size accordingly, or remove that section and it will use the regular logo. It may look funky on retina devices. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[shellshock]

Hi Robin - you are a star thanks for that - worked a treat : )

having problems with the homepage footer on mobile too - the content (a

list) is not displaying properly but only on the home page - internal pages are fine - have you any clues on what that might be?

[Robin]

Glad that helped with the logo!

Without seeing it, I can't make a good guess. But look for .home selectors in your stylesheet--assume you are using Chrome's developer tools or Firebug? Check the footer list on both pages and see what different classes are being applied. Good luck!

---

I do the best I can with what I’ve got. (say hey on twitter)

[shellshock]

Hi Robin

This is my test site:
http://www.shellshockstudio.co.uk/

if you can see the home page on a mobile (I only have apple) you can see that some of the widgets are not rendering well - I think it is the classes on the home top widget that is throwing the footers below out - trying to wrangle and fix but any input would be greatly received as I am a real code newbie : )

[Robin]

I think if you go into your media query, maybe at the 767 level, and add this:

.home-top .widget,
.home-middle .widget {
    width: 100%;
}

That should start to sort you out. From what I see on my phone and computer the issues are in those two areas, not the footer-widgets.

There are probably better ways to do it, but I normally sort out mobile issues by making the browser on my computer super skinny and using the develop tools there, then applying the fix and rechecking the mobile on an actual device. I know Apple has some way of using developer tools on the phone but I haven't needed them yet.

---

I do the best I can with what I’ve got. (say hey on twitter)

[shellshock]

thanks for your help Robin - seems to be a problem with the margins - but I am slowly getting there : )

[amplifiedsteve]

Chiming in here to say, thanks. I was having the same issue on mobile / logo but this worked a treat.

Would make sense if this would have automatically, so we dont have to touch the CSS. If you set the header / logo image in the CMS, it should reflect on all devices. Just my 2 cents 🙂

Thanks

---

Steve Mullen – owner Brite Social – find me on Twitter and G+
Digital marketing consultant, WordPress builder with focus on leisure, destination and entertainment.

[Author]

Posts