Mobile Responsive Header

Community Forums Forums Design Tips and Tricks Mobile Responsive Header

This topic is: not resolved

This topic contains 11 replies, has 4 voices, and was last updated by  judith8686 11 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #71617

    usmcwife01
    Participant
    Post count: 1

    Some one helped me get my uploaded header so it will shrink to fit on mobile, but now I have a big space of blue above and below it. Is there a way to get rid of it? I was looking at the showcase blogs for lifestyle pro. They all have custom headers that still look exactly the same on a mobile device. Is that possible to do? Thanks in advance for your help. I am a newbie and still trying to learn. :)

    http://www.familyfitforduty.com
    #71735

    nutsandbolts
    Moderator
    Post count: 3137

    Change your header background CSS rule to this:

    background: #fff url(http://www.familyfitforduty.com/wp-content/uploads/2013/11/Blogger-11-6.jpg) center no-repeat !important;

    That should remove the blue.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #72238

    kmmackey
    Participant
    Post count: 7

    I am using the lifestyle pro theme and am having the same problem. I tried the above and it did not help. Before that I had followed the pixelista tutorial – http://thepixelista.com/responsive-genesis-child-theme-logo/ but the smallest size has too much space above and below the banner. Here is my testing site – http://thepixelista.com/responsive-genesis-child-theme-logo/.

    #72240

    nutsandbolts
    Moderator
    Post count: 3137

    Can you paste your link again? Looks like you pasted the tutorial link twice.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #72277

    kmmackey
    Participant
    Post count: 7

    Here is the link to my test site – http://www.kmtesting.com/

    As mentioned, I am using the lifestyle pro theme. I tried the above and it did not help. Before that I had followed the pixelista tutorial – http://thepixelista.com/responsive-genesis-child-theme-logo/ but the smallest size has too much space above and below the banner.

    Thanks,
    Kathy

    #72291

    nutsandbolts
    Moderator
    Post count: 3137

    Have you made any changes to your stylesheet other than CSS rules related to the header? If you haven’t made other significant changes, I would suggest reverting back to the original Lifestyle Pro stylesheet – you can open style.css on your computer with a text editor and just copy and paste everything to overwrite what’s on the site now. Then if you follow this tutorial, which was created specifically for Lifestyle Pro, you should be able to fix the header issue pretty easily: http://wpsites.net/web-design/customize-mobile-responsiveness-of-lifestyle-pro-theme-header/


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #72329

    kmmackey
    Participant
    Post count: 7

    Hi,

    I followed that tutorial and the banner is still not responsive.

    http://www.kmtesting.com/

    Help is appreciated.

    #72330

    nutsandbolts
    Moderator
    Post count: 3137

    If you would be comfortable letting me log into your site, I would be glad to try to get this fixed for you. You can email me directly if that’s something you’d like to try, or no worries if that isn’t something you want to do. Sometimes it’s just easier to do than to explain. :)


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73137

    kmmackey
    Participant
    Post count: 7

    Hello,

    Just want to say a very BIG THANKS to Andrea of Nuts and Bolts for helping with this. The link shown is a test site so if anyone checks this in a few days, it may show something unrelated to this post.

    Kathy

    #73585

    judith8686
    Member
    Post count: 18

    I think i’ve completely messed up my css trying to fix this…. (massive newbie)

    I wanted to upload my own header, which I have done after altering sizing in functions php. It looks great on my laptop, but on iphone its still showing all the padding and on ipad it actually crops the header ;-/

    I’ve tried the above but think Im doing more harm than good.

    my site is http://www.judithlewis.co.uk

    #73671

    nutsandbolts
    Moderator
    Post count: 3137

    Hi Judith,

    Find this in your stylesheet:

    .header-full-width.header-image .site-title a {
    background-position: center !important;
    margin: 0;
    }

    and change it to this:

    .header-full-width.header-image .site-title a {
    background-position: center !important;
    margin: 0;
    background-size: contain !important;
    }

    That will force the header to resize for tablets (though you’ll still have a lot of padding/aqua background around it).


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73827

    judith8686
    Member
    Post count: 18

    Thanks for that Andrea, still crops when tablet is in portrait, but I can live with that lol

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.