WordPress.org

Ready to get started?Download WordPress

Forums

Singl
Mobile compatibility? (10 posts)

  1. thejulycontrary
    Member
    Posted 8 months ago #

    Is there a way to make this theme show up as intended on mobile devices? When I try it on my phone, it doesn't load quite correctly. It seems to offset and the background image does a tiling effect when the full image doesn't look fully loaded.

    Here's a picture
    https://www.dropbox.com/s/bck36ig5c2zwsyd/Screenshot_2014-07-04-13-52-27.png

  2. Thanks for the screenshot. Could you please let me know:

    - what make and model of phone
    - what OS
    - what browser and version

    I'm not seeing that effect on iPhone 5s / iOS 7.1, so having more details will help me investigate. Thanks!

  3. thejulycontrary
    Member
    Posted 8 months ago #

    Huh...

    I'm running a Samsung Galaxy S3 with SlimRoms Slimkat(KitKat build) on it. That affect happens on both chrome and the internal browser when I go to the page and resize it to see the logo. Otherwise, the logo appears offset/out of view. In order to "center" it, I have to resize the page and then the weirdness happens.

    Thanks for your help!

  4. designsimply
    Member
    Posted 7 months ago #

    I tried looking for a way to test this via http://www.browserstack.com/ and it does have an option to test a Samsung Galaxy S3 with Android, but it does not say what version of Android is being simulated. Also, it may not be the best test because I can't really pinch to resize, and I'm assuming that pinching to resize is what you were doing—could you confirm that?

    Here is a screenshot from my test for reference: https://cloudup.com/c706_4d57yH

    If it appears normally in other phones and on more up-to-date versions of Android, then it's possible it won't get attention because it only happens for a limited set of circumstances (KitKat) and only if you pinch to resize. But we can always report it as an issue if we can nail down some exact steps to reproduce.

    It helps to have a very detailed set of steps and requirements, including your site URL.

    To help test, I also tried http://singldemo.wordpress.com/ on my iPhone 5 using Safari on iOS 7.1.2 by pinching to try to resize just to see if I could find any problems on iOS and everything worked normally for me in that test.

  5. designsimply
    Member
    Posted 7 months ago #

    I'm checking back in on this. I was never able to reproduce the problem. Please consider adding some extra details about what you've tested (i.e. pinching to resize, something else?) if you'd like to continue looking into this.

  6. thejulycontrary
    Member
    Posted 7 months ago #

    Actually, I've upgraded phones and I am now on a Samsung Galaxy S5. The issue seems to be that the background shows up the right size but the content is out of focus so when I pinch resize the screen, everything comes into focus but does the weird thing shown above.

  7. sacredpath
    Moderator
    Posted 6 months ago #

    On my iPhone, I'm seeing the content shifted to the right, both in landscape and portrait. In the following CSS rule, change "width" to "max-width and see what you think.

    .page-header, .page-content, .hentry {
        background: none repeat scroll 0 0 transparent;
        box-sizing: border-box;
        margin: 0 auto 40px;
        max-width: 720px;
        padding: 40px 40px 20px;
        position: relative;
    }
  8. thejulycontrary
    Member
    Posted 6 months ago #

    That seems to resolve the issue of the sizing except now my buttons are not sizing correctly. Any suggestions?

    The original code I had was this

    .page-header,
    .page-content,
    .hentry {
    	position: relative;
    	width: 720px;
    	margin: 0 auto 40px auto;
    	padding: 40px 40px 20px 40px;
    	background: transparent;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing:    border-box;
    	box-sizing:         border-box;
    }
  9. sacredpath
    Moderator
    Posted 6 months ago #

    Great, we are part way there then. On the buttons, can you explain what you are looking for and we can see about doing that. Personally I like the size of the buttons on my mobile. With the font you are using on the buttons, I think they may get hard for me to read if the images were any smaller.

    I do notice they are not centered above the logo when they go to a single column. When you reply back on the above I'll include code to center those. What I would provide now might not work if you are wanting to resize the images used for your navigation.

  10. thejulycontrary
    Member
    Posted 6 months ago #

    Actually, You bring up very good points. Maybe I should leave them at that size. On the desktop side, they are lined up horizontally but, as you mentioned, they form a column on the mobile site. I have used a bit of html to make them rollover icons.

    <a href="http://thejulycontrary.com"><img class="alignnone wp-image-241 size-full" src="http://thejulycontrary.com/wp-content/uploads/2014/07/HomeBlue-e1405553472455.png" onmouseover="this.src='http://thejulycontrary.com/wp-content/uploads/2014/07/InvHomeBlue-e1405629063438.png'" onmouseout="this.src='http://thejulycontrary.com/wp-content/uploads/2014/07/HomeBlue-e1405553472455.png'" alt="HomeButton" width="140" height="70" /></a>

    Also, I had to add a little bit of space to get them to center correctly on the desktop side. So hopefully your code will help that too!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.