WordPress.org

Ready to get started?Download WordPress

Forums

Spun
Mobile View Skewed Right Side Header (15 posts)

  1. marc blackwell
    Member
    Posted 7 months ago #

    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!

  2. marc blackwell
    Member
    Posted 7 months ago #

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

  3. Andrew
    Forum Moderator
    Posted 7 months ago #

    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 ?

  4. marc blackwell
    Member
    Posted 7 months ago #

    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!

  5. Andrew
    Forum Moderator
    Posted 7 months ago #

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

  6. marc blackwell
    Member
    Posted 7 months ago #

    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.

  7. Andrew
    Forum Moderator
    Posted 7 months ago #

    Which browser & browser version does the issue occur in?

  8. marc blackwell
    Member
    Posted 7 months ago #

    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

  9. marc blackwell
    Member
    Posted 7 months ago #

    all are updated - i assume. not sure if the client's and her publicists are up to date or not...

  10. Andrew
    Forum Moderator
    Posted 7 months ago #

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

  11. marc blackwell
    Member
    Posted 7 months ago #

    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?

  12. Andrew
    Forum Moderator
    Posted 7 months ago #

    Can you re-explain the issue?

  13. marc blackwell
    Member
    Posted 7 months ago #

    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

  14. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    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

  15. Andrew
    Forum Moderator
    Posted 7 months ago #

    Yes, first validate your site.

Reply

You must log in to post.

About this Theme

About this Topic

Tags