Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Pro – Header Issues
Tagged: header, lifestyle Pro
- This topic has 20 replies, 5 voices, and was last updated 10 years, 11 months ago by
Elaine Griffin.
-
AuthorPosts
-
February 1, 2014 at 12:44 pm #88024
littleleafash
MemberHi 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/February 1, 2014 at 1:13 pm #88028Brian Wawryshyn
MemberI 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.
February 1, 2014 at 4:26 pm #88062Brian Wawryshyn
MemberI 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/
February 4, 2014 at 8:22 pm #88653littleleafash
MemberThanks 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!
February 5, 2014 at 9:18 am #88762John
ParticipantHey 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 😉February 5, 2014 at 2:57 pm #88826littleleafash
MemberAhh! You saved the day!!
Thank you SO much. 🙂
February 6, 2014 at 12:14 pm #88974John
ParticipantYou're welcome!
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉February 6, 2014 at 12:44 pm #88981Rita
MemberSo 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.
February 6, 2014 at 7:05 pm #89044John
ParticipantYippyMomma,
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 😉February 11, 2014 at 3:39 pm #89866Rita
MemberWas able to figure it out.
February 23, 2014 at 5:02 am #92000Rita
MemberOk. So the left alignment is good, but noticed the vertical alignment is top now instead of center. http://75.103.92.60/wp/
February 25, 2014 at 12:09 pm #92325Elaine Griffin
MemberThis 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!February 26, 2014 at 8:31 am #92468Elaine Griffin
MemberI 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!
ElaineFebruary 26, 2014 at 5:21 pm #92571John
ParticipantElaine,
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 😉February 27, 2014 at 3:26 pm #92734Elaine Griffin
MemberThank 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!
ElaineFebruary 27, 2014 at 5:35 pm #92755John
ParticipantYou're welcome! Ready when you are...
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉February 27, 2014 at 6:27 pm #92761Elaine Griffin
MemberGreat, thank you! Sorry it took me so long. It's all set!
February 27, 2014 at 7:19 pm #92763John
ParticipantElaine, 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 😉February 28, 2014 at 3:10 am #92788Elaine Griffin
MemberWorked like a charm! THANK YOU!! 🙂
February 28, 2014 at 9:01 am #92821John
ParticipantYou'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 😉 -
AuthorPosts
- The topic ‘Lifestyle Pro – Header Issues’ is closed to new replies.