Alternate Header when Using iPhone

[jasonHawk]

Hello guys, is there a way to have an alternate header when a user is using an iphone? or when a user is using mobile phones that has low screen size/resolution. By the way this is the website matttowner(dot)com and I'm using executive pro theme . The current website header is mobile responsive, but when I use an iphone the phone number is very small.

best luck... Jason

[Brad Dalton]

You could try CSS Media Queries at the end of your child themes style.css file or PHP conditional tags for mobiles.

---

Tutorials for StudioPress Themes.

[Scott]

Yes, assuming you have a logo.png active, you can upload your alternate header file, say logo-alt.png to your images directory, then use a media query custom css to replace the image with your alternate image when the iphone viewport size is triggered.

Example:

<style>
@media only screen and (max-width: 767px) {
.header-image .site-header .wrap {
	background: url(http://yoursite.com/wp-content/themes/genesis/images/logo-alt.png) no-repeat center;
}
}
</style>

Once you have uploaded logo-alt.png to your achive child theme's images directory, you can replace the URL and place the above code into your "Genesis > Header and Footer Scripts > wp_head" box....

[jasonHawk]

Thanks for the input Scott and braddalton. Trying this now!

[Author]

Posts