Sample Theme Header Image on iPhone Portrait

Community Forums Forums Design Tips and Tricks Sample Theme Header Image on iPhone Portrait

This topic is: resolved

This topic contains 9 replies, has 3 voices, and was last updated by  Lauren @ OnceCoupled 7 months, 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #103895

    jnine0712
    Member
    Post count: 13

    Ok, I have been working on designing a site for over a week and thought I had fixed my issues with the header image on my iPhone, but for Portrait my image still gets cut off. I know my image for both landscape and portrait have to some how be the same for the sample theme. But if you make the image the smallest size for Portrait then it is very small for Landscape view and to the left hand side, but when I use the Landscape sized photo, it gets cut off on the Portrait view on the iPhone.

    I have added all the proper images to my media queries and thought I could add special coding for the iPhone Portrait view, but not working.

    My header looks perfect otherwise on all other devices (desktop, laptop, iPad and iPhone Landscape).

    Can anyone help me on this?

    Thanks again!!

    http://makeyourowndamndinner.com
    #103900

    nutsandbolts
    Keymaster
    Post count: 3202

    Hmm… It’s cut off for me on just about everything that isn’t an iPad: http://responsive.nutsandboltsmedia.com/?url=http://makeyourowndamndinner.com/

    Looks like it’s still picking up the height and width rules here:

    .header-image #header a {
    background: url(http://makeyourowndamndinner.com/wp-content/uploads/2014/04/Another-GodDamn-Header.png) no-repeat center;
    margin: 0 auto;
    padding: 0;
    height: 230px;
    width: 1152px;
    }

    because there’s nothing in the smaller media queries to replace that height and width. Hopefully that makes sense. Each media query for .header-image #header a needs a height and width to counteract that one, or you try switching to max-width and max-height on the main CSS rule.


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

    #103903

    Lauren @ OnceCoupled
    Member
    Post count: 643

    To follow the method you’re currently using, you probably just need to specify the width of iPhone portrait in your media queries and make a new rule for that one – since it’s a different size than iPhone landscape, the image isn’t going to fit into both perfectly.

    Honestly though (and I’m sorry to be repetitive, but I want you to have the best solution!) you should go with the response I provided earlier: http://www.studiopress.com/forums/topic/sample-theme-trying-to-get-header-to-be-responsive/#post-102999

    Then you can use only one image, and re-size the height of that area as the screen width decreases. You’ll want to change .header-image #header a to remove the forced width and add background-size: contain;

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #103917

    jnine0712
    Member
    Post count: 13

    Here is the code, I have used:

    .header-image #header a {
    background: url(http://makeyourowndamndinner.com/wp-content/uploads/2014/04/Another-GodDamn-Header.png) no-repeat center;
    margin: 0 auto;
    padding: 0;
    height: 230px;
    width: 1152px;
    }

    I am not sure what part of it I am supposed to change to contain and where.

    Please help.

    Thanks again.

    #103921

    Lauren @ OnceCoupled
    Member
    Post count: 643

    Use this:

    .header-image #header a {
         background: url(http://makeyourowndamndinner.com/wp-content/uploads/2014/04/Another-GodDamn-Header.png) no-repeat center center;
         margin: 0 auto;
         padding: 0;
         height: 230px;
         background-size: contain;
    }

    You’ll need to update your media queries after this. The background will scale automatically but the height will need to be adjusted.

    :)


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #103927

    jnine0712
    Member
    Post count: 13

    So, do I take out the media queries’ images or just updating the heights? Sorry a bit confused on this.

    #103931

    Lauren @ OnceCoupled
    Member
    Post count: 643

    Yup, after that just change the height in your media queries.

    E.G.

    @media only screen and (max-width: 1024px) {
    	.header-image #header a {
    		height: 200px;
    	}
    }

    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #103934

    jnine0712
    Member
    Post count: 13

    I have different images in the media queries for each device is what I mean. So, do I take out each of these images and just update the height?

    #103944

    jnine0712
    Member
    Post count: 13

    I got it and is working perfectly now with playing around with the code. Thank you so much Lauren for all your help :)

    #103967

    Lauren @ OnceCoupled
    Member
    Post count: 643

    Glad to hear that!


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

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

You must be logged in to reply to this topic.