WordPress.com

1. bmarcogliese
   Member
   Oct 10, 2012, 9:19 PM

   The formatting of my header (and for my site in general) is not proper when viewed from an iphone, and especially from an ipad. This is not great considering a majority of people now access the internet through those two forms. I've tried reading a gazillion articles on how to fix, but am hoping someone can guide me through. Thanks in advance to anyone bored enough, or angelic enough, to help!

   Assistance would be GREATLY appreciated.

   Theme: Just Desserts.

   The blog I need help with is brookes-nook.com.

2. designsimply
   Happiness Engineer
   Oct 13, 2012, 3:10 PM

   I reviewed http://brookes-nook.com/ on an iPhone and an iPad, and I see what you mean about the header but the rest of the site formatting looks good to me.

   Try adding this to make the header fit a bit nicer, and let me know if it looks good.

   .site-header .site-title-wrap {
   	background-size: contain;
   }

   It's possible we'd need to add some additional rules to make the height fit better too.

3. designsimply
   Happiness Engineer
   Oct 13, 2012, 4:33 PM

   This might be better:

   @media only screen and (max-width: 920px) {
   	.site-header .site-title-wrap {
   		background-size: contain;
   		height: inherit;
   	}
   }
   
   @media only screen and (max-width: 480px) {
   	.site-header .site-title-wrap h1 {
   		line-height: 60px;
   	}
   }

4. bmarcogliese
   Member
   Oct 15, 2012, 12:59 PM

   cannot thank you enough for your help! here is the problem...i'm not quite sure where to add this code. If I select the CCS tab under "custom design" I get a blank code page. do I enter it there and then select "save style page?"

   confused as to where to access the theme code so that I may revise per your recommendations. Again, thank you, thank you for your reply!

5. bmarcogliese
   Member
   Oct 15, 2012, 1:30 PM

   ok, so i read through the CSS customization tutorial, copied this into the style sheet, saved and now the header is off to the left on the ipad(?) anything else i can try? thank you :-)

6. designsimply
   Happiness Engineer
   Oct 25, 2012, 7:11 PM

   If I select the CCS tab under "custom design" I get a blank code page. do I enter it there and then select "save style page?"

   That shouldn't happen, but I see later that you mentioned using an iPad and there was a bug for iPad CSS editor previews that was fix. The update probably went in during your testing before. Let me know if you have any troubles with that going forward.

7. designsimply
   Happiness Engineer
   Oct 25, 2012, 7:13 PM

   now the header is off to the left on the ipad

   Adding this will probably do the trick when it comes to centering the background header image on an iPad:

   .site-header .site-title-wrap {
   	background-position: top center;
   }

   Note that you may need to fidget with the numbers/settings until it looks right to you. I noticed header font looked too big on an iPhone, so here is the whole CSS edit with a few more adjustments added that you can play around with:

   @media only screen and (max-width: 920px){
   	.site-header .site-title-wrap {
   		background-size: contain;
   		height:inherit;
   	}
   }
   
   @media only screen and (max-width: 480px){
   	.site-header .site-title-wrap h1 {
   		height: 70px;
   	}
   	.site-title-wrap h1 a {
   		display: block;
   		line-height: 70px;
   		font-size: 32px !important;
   		font-weight: bold !important;
   	}
   }
   
   .site-header .site-title-wrap {
   	background-position: top center;
   }

Topic Closed

This topic has been closed to new replies.