Metro Theme Header Issues – Needing A Wee Bit of Help

[Micky Stewart]

Can someone please offer assistance? My client wanted a much larger header, so I created a 1080 x 420 image for her. However, now the header is so big it's no longer mobile responsive. I did update the css file so the media size would accommodate the new size, but I really want it to expand for all mobile devices. Is there a universal code I can just insert that will enable it to work on all mobile devices? What can I do to get this to work properly?

Here is the test site address http://www.mickystestsite.com and please forgive the mess over there, as I have literally just started working on it, so I am trying out new things. Any help will be truly appreciated.

Thank you!

http://www.mickystestsite.com

[Marcy]

If you add background-size: contain to where you add the image, it will work. You will also need to adjust the height for different screen sizes too though.

.site-title a {
    background: url(http://mickystestsite.com/wp-content/uploads/2015/09/Curly-Byrdie-Chirps-Header-1080-x-420.jpg) no-repeat !important;
    background-size: contain !important; /* required */
}

Here is a tutorial that might help
https://amethystwebsitedesign.com/add-retina-logo-to-genesis-or-wordpress-themes/

---

Marcy | Amethyst Website Design | Twitter

[Micky Stewart]

Marcy,

Thank you so much. I am going to watch your tutorial and prayerfully it will give me all of the help I need. I have seen a few of your other responses to people in need and you were always spot on. Thanks so much for your willingness to help me.

[Marcy]

Great! If you run into problems, just ask again.

---

Marcy | Amethyst Website Design | Twitter

[Micky Stewart]

Marcy,

I am a little confused. I have been in that css and have added that code and nothing that I am doing seems to work. I am certain it's a simple step I am leaving out.

[Micky Stewart]

I took out all of the other code I added since what I thought was correct was wrong. I will give it another go tomorrow.

[Marcy]

In style.css near line 931, you have this:

.header-image .site-title a {
    background-color: none;
    max-width: 1080px;
    min-height: 300px;
    padding: 0
}

To that add:
background-size: contain !important;
so it looks like this

.header-image .site-title a {
    background-color: none;
    max-width: 1080px;
    min-height: 300px;
    padding: 0;
    background-size: contain !important; 
}

I think your line with the image that I listed above is not in your style.css.

---

Marcy | Amethyst Website Design | Twitter

[Micky Stewart]

Okay Marcy, I am going to give it another go and pray it works for me. I don't know why I keep trying this so late at night when I am exhausted.

[Micky Stewart]

Marcy,

I could just hug you! It worked!!!!!! Now, I just have to figure out how to get rid of all of the extra padding after the header. You are AMAZING!!!! Thank you so much.

[Marcy]

Hi, Micky,

Hooray! You did it! I'm glad it worked out for you.

Now that you have that finished, I can help you with the extra white space when the logo gets smaller.
Try adding this at the bottom of your style.css.

@media only screen and (max-width: 1139px) {
	.header-image .site-title a {
		min-height: 248px;
	}
}

@media only screen and (max-width: 767px) {
	.header-image .site-title a {
		min-height: 194px;
	}
}

@media only screen and (max-width: 480px) {
	.header-image .site-title a {
		min-height: 120px;
	}
}

@media only screen and (max-width: 320px) {
	.header-image .site-title a {
		min-height: 100px;
	}
}

---

Marcy | Amethyst Website Design | Twitter

[Micky Stewart]

Marcy,

Thank you so much, that indeed did the job. You are the absolute best and I cannot thank you enough!!!!!!!!

[Marcy]

You're welcome! I'm glad you got it working!

---

Marcy | Amethyst Website Design | Twitter

[lwharris]

Thank you from another happy person! Now my fab logo can be seen in all it's glory on the big screen, but sizes down nicely for mobile.

[Marcy]

That's great! Thanks for letting me know!

---

Marcy | Amethyst Website Design | Twitter

[btwebmedia]

Thanks for this code. It fixed my spacing issue with the mobile header.

[Author]

Posts