Lifestyle Pro – Header Issues

[littleleafash]

Hi there!

So I made a full-width header here: http://www.readingandchickens.com/

And when I resize the browser or view on a mobile device, the header width adjusts to the window size, but it cuts off when it's between the widths of ~ 1120px-752px. Above that and below that, it looks great!

Should I load a resized header for those sizes? I can't figure out what is making the header resize correctly below 752px - because ideally it would just resize fluidly! I've tried a few things with media queries, but can't seem to crack it.

Thanks!

http://www.readingandchickens.com/

[Brian Wawryshyn]

I am having the same issue with my site using the news pro theme. The image gets cut off on tablets (768) and Ipads (1024), and is really small on smaller devices.

http://bclionsden.ca/

[Brian Wawryshyn]

I found this tutorial, about how to solve the image clipping. It seems to work, but I have some css issues to workout because I get a space between the header image and the nav menu at 1048.

Hope it helps you: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

[littleleafash]

Thanks for the link - glad it helped you! Unfortunately, it didn't do anything except make the header completely gone for me (see test site: http://www.ashleycadaret.com/test/)

Hmm. I feel like this is a simple answer that someone should know!

[John]

Hey Brian, thanks for the mention!

littleleafash,

Your logo image is there, it's just hidden by the StudioPress CSS. If you remove or comment out line 888,

.header-image .site-description, .header-image .site-title a

and line 894,

.header-full-width.header-image .site-title a

you'll see your logo and then you can finish dialing it in with CSS. For example, removing any min-height declarations in the header area elements is a good idea.

You'll probably also want to remove your site description, which I explain how to do in that tutorial that Brian mentioned.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[littleleafash]

Ahh! You saved the day!!

Thank you SO much. 🙂

[John]

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Rita]

So I'm trying to get this work on my test site. I can't seem to get the logo to left align. It's just stuck in the middle no matter what I do.

[John]

YippyMomma,

Without a URL to your site there's no way for us to know what's wrong.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Rita]

Was able to figure it out.

[Rita]

Ok. So the left alignment is good, but noticed the vertical alignment is top now instead of center. http://75.103.92.60/wp/

[Elaine Griffin]

This is a great start for me - thank you! Unfortunately I'm having a hard time getting the header image on my site to be full-width. Instead it is just in the top corner.
http://www.thelitkitchen.com
Thanks!

[Elaine Griffin]

I just wanted to put a little FYI that I changed back to the original non-mobilized theme, so my client's site could look good on the computer. If anyone wants to help me out with this, I will switch back to the mobile version!
Thanks a bunch!
Elaine

[John]

Elaine,

I noticed that you had switched the logo/header back. If you want to switch back to the mobile version I'll (try to) take a look at it today still.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Elaine Griffin]

Thank you so much John!
I was out last night but will be available tonight if you have time. Just let me know and I will activate!
Thanks again!
Elaine

[John]

You're welcome! Ready when you are...

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Elaine Griffin]

Great, thank you! Sorry it took me so long. It's all set!

[John]

Elaine, try this modified stylesheet: https://db.tt/RRTYjgTp

I commented out what didn't need to be there related to the header and logo image, added one or two things, but didn't delete anything so you can see what I did.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Elaine Griffin]

Worked like a charm! THANK YOU!! 🙂

[John]

You're welcome!

As a last tweak, it looks like I forgot to comment out line 1887,

.site-header {
		padding: 24px;
		padding: 2.4rem;
	}

which will remove the extra padding around the header image on smaller screens/devices.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts