Support » Theme: Spun » Mobile View Skewed Right Side Header

  • marc blackwell

    (@blackwellmarcgmailcom)


    Love this theme, and so does my client.

    http://www.natbardonnet.com

    We have been working to get it to look PERFECT on Mobile devices. After changing the header image to a graphic instead of text, we had difficulties getting the header to resize. Giving it percentages

    (<img src=”http://natbardonnet.com/site/wp-content/uploads/2013/12/natheader3.png” alt=”Nat Bardonnet” style=”max-width: 100%;height: auto”> <?php wp_head(); ?>)

    instead of fixed pixels seemed like it would do the trick, however it has a large space on the right hand side.

    See picture for a clearer understanding: http://natbardonnet.com/site/wp-content/uploads/2013/12/download_20131209_135940.jpg

    Please advise!

Viewing 14 replies - 1 through 14 (of 14 total)
  • marc blackwell

    (@blackwellmarcgmailcom)

    It looks fine on an iPad, and it has LESS space on an Android phone – but has a lot of space on the iPhone…

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Are you sure the issue relates to your header image?
    What mobile screen size are you using?
    Does the issue persist on the theme’s demo site: http://spun-demo.calobeedoodles.com ?

    marc blackwell

    (@blackwellmarcgmailcom)

    I’m viewing the site on an iPad – looks perfect
    iPhone – looks like the link posted above
    Galaxy S4 – looks much like the iPhone screenshot, but less white space on the right hand side…

    thanks for your help!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Does the issue persist on the theme’s demo site: http://spun-demo.calobeedoodles.com ?

    marc blackwell

    (@blackwellmarcgmailcom)

    Andrew,

    The theme demo site is using a text based header – where as I have added a graphic based header.

    The Menu option does appear to be in the same place on both the demo and the site I’m working on – but it’s hard to tell if there is still the white negative space on the right hand side…

    Looking at the site with Firebug on Chrome on my Mac there is no space between the header and the body… if that makes sense.

    Again, thank you for your assistance.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Which browser & browser version does the issue occur in?

    marc blackwell

    (@blackwellmarcgmailcom)

    iphone – safari (haven’t checked it on chrome, will download chrome on my wife’s iphone tonight to check if need)
    android – chrome and android’s internet browser

    and again it works fine on the ipad with chrome and safari

    marc blackwell

    (@blackwellmarcgmailcom)

    all are updated – i assume. not sure if the client’s and her publicists are up to date or not…

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try deleting your header image to see if the issue persists, I’m not convinced this is the origin.

    marc blackwell

    (@blackwellmarcgmailcom)

    Hi Andrew…

    I’m not quiet sure what deleting the header will do as the client requires that the header be on the site…

    Do you want me to delete it so I can tell something specific?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you re-explain the issue?

    marc blackwell

    (@blackwellmarcgmailcom)

    Yes, Andrew.

    I installed the theme Spun. I added a graphic (1400x300ish pixels) via the header.php using the following code:

    (<img src=”http://natbardonnet.com/site/wp-content/uploads/2013/12/natheader3.png” alt=”Nat Bardonnet” style=”max-width: 100%;height: auto”> <?php wp_head(); ?>)

    When viewed on an iPhone – it looks like this: http://natbardonnet.com/site/wp-content/uploads/2013/12/download_20131209_135940.jpg

    The client wants the graphic header to stretch all the way across the top of the iPhone screen.

    I have increased the percentage to 110% but it still doesn’t stretch all the way.

    Thanks again for your on going assistance.

    -marc

    WPyogi

    (@wpyogi)

    Not sure if these are the cause, but there’s a <center> in the head section?

    Maybe see if any of these markup errors are a problem?

    http://validator.w3.org/check?uri=http%3A%2F%2Fnatbardonnet.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Yes, first validate your site.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Mobile View Skewed Right Side Header’ is closed to new replies.