Lifestyle Pro – Header Issues

Community Forums Forums Design Tips and Tricks Lifestyle Pro – Header Issues

This topic is: resolved

This topic contains 20 replies, has 5 voices, and was last updated by  Elaine Griffin 6 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #88024

    littleleafash
    Participant
    Post count: 21

    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!

    • This topic was modified 7 months, 2 weeks ago by  littleleafash. Reason: Pushed enter too soon
    • This topic was modified 7 months, 2 weeks ago by  littleleafash. Reason: Pushed enter too soon
    http://www.readingandchickens.com/
    #88028

    Brian Wawryshyn
    Participant
    Post count: 2

    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/

    #88062

    Brian Wawryshyn
    Participant
    Post count: 2

    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/

    #88653

    littleleafash
    Participant
    Post count: 21

    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!

    #88762

    John
    Participant
    Post count: 157

    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 ;)

    #88826

    littleleafash
    Participant
    Post count: 21

    Ahh! You saved the day!!

    Thank you SO much. :)

    #88974

    John
    Participant
    Post count: 157

    You’re welcome!


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

    #88981

    YippyMomma
    Participant
    Post count: 89

    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.

    #89044

    John
    Participant
    Post count: 157

    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 ;)

    #89866

    YippyMomma
    Participant
    Post count: 89

    Was able to figure it out.

    #92000

    YippyMomma
    Participant
    Post count: 89

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

    #92325

    Elaine Griffin
    Participant
    Post count: 86

    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!

    #92468

    Elaine Griffin
    Participant
    Post count: 86

    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

    #92571

    John
    Participant
    Post count: 157

    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 ;)

    #92734

    Elaine Griffin
    Participant
    Post count: 86

    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

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.