Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sample Theme Header Image on iPhone Portrait
Tagged: header image, iPhone, Portrait View, sample child theme
- This topic has 9 replies, 3 voices, and was last updated 9 years, 11 months ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
May 6, 2014 at 2:33 pm #103895jnine0712Member
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.comMay 6, 2014 at 3:06 pm #103900nutsandboltsMemberHmm... 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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 6, 2014 at 3:10 pm #103903Lauren @ OnceCoupledMemberTo 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.community/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 addbackground-size: contain;
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 6, 2014 at 3:47 pm #103917jnine0712MemberHere 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.
May 6, 2014 at 3:57 pm #103921Lauren @ OnceCoupledMemberUse 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.
🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 6, 2014 at 4:05 pm #103927jnine0712MemberSo, do I take out the media queries' images or just updating the heights? Sorry a bit confused on this.
May 6, 2014 at 4:11 pm #103931Lauren @ OnceCoupledMemberYup, 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; } }
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 6, 2014 at 4:13 pm #103934jnine0712MemberI 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?
May 6, 2014 at 4:45 pm #103944jnine0712MemberI got it and is working perfectly now with playing around with the code. Thank you so much Lauren for all your help 🙂
May 6, 2014 at 7:19 pm #103967Lauren @ OnceCoupledMemberGlad to hear that!
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.