wfmw009

Sorry. Didn’t catch that it was still open. Thanks Petra!

Okay. Sorry for the change of direction. I found part of the issue. I had recently installed a plugin called “WP Mobile Detector Mobile Plugin”. It dawned on me I should probably deactivate it to see what results and now Ipad 2 view is almost perfect.

Iphone is now the only immediate issue. The width of the header and some content is about half of the size of the screen with content extending outside the margins (sorry for the bad explanation I couldn’t think of a better way to say it). Here are a couple images of the home page and within an article. Let me know if you have any questions. Your help has been priceless!

@crouchingbruin
Duh! My bad. I have been submersed in this stuff and didn’t catch that. I did try it and it didn’t work so…
@dmbarber
…I deleted everything above and started from scratch with the below

.site-header .site-branding {
background-position: center !important;
background-repeat: no-repeat;
background-size: contain !important;
max-height: 150px;
}

.site-title a, .site-title h2 {
background: none !important;
width: auto;
height: auto;
font-size: 1px;
line-height: 0;
position: absolute;
top: 0;
left: 0;
}

This has given me my best results yet on the ipad mini. I added in some code, along with the above, to keep my header “clickable” on the desktop. So, as of right now, my desktop and ipad mini appear to be in very good shape.
The ipad 2 and iphone still have issues. Iphone header image is cut off on both sides and “site title” and “description” still show on top of header image. Ipad 2 just has “site title” and “description” showing on top of header image.
Thank you for explaining some of the coding to me as I am only about a week into understanding this stuff and it is very helpful.
I did figure the url-to-your-logo.png’ one out and got that linked to my actual image.
As for ‘/*— iPhone only CSS here —*/’ what should I replace that sort of thing with? Don’t understand. Also, I used responsinator but it seems the results are not what I am seeing on my screens. Does IOS version on the devices come into play? My iphone and ipad 2 are NOT on IOS 5. Not sure if that matters? Thanks again for taking the time to help me out.

@batharoy
I just took a look at that image. I see what you are saying. Is there anything I can do to fix the footer on mobile screens only?
@crouchingbruin
I tried combining the codes from the three of you DMBarber, Tareq and yourself…

.site-branding {
overflow: hidden;
}
.site-branding {
margin-top: 150px;
}

@media screen and (max-device-width: 480px){
    /*--- iPhone only CSS here ---*/
}

@media screen and (max-width: 600px) {
   .site-branding {
      display: none;
      }
}

It did not work. The below…

.site-branding {
margin-top: 150px;
}

…specifically made the header space very large on my desktop but that is the only piece that had any noticeable effect. I’m really struggling with this. I only have minimal CSS knowledge so just been running the gamut trying to get a fix for this. Hoping someone who has experienced this same issue can shed some light. :/

I have fixed the issue on tablet. It turned out that I was not properly linked to my image. Once I linked that up it seemed to fix the issue. Thank you all for your help.

Everything is working perfect now. Thanks!