Mobile compatibility?

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!

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!

I tried looking for a way to test this via https://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 https://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.

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.

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.

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;
}

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;
}

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.

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="https://thejulycontrary.com"><img class="alignnone wp-image-241 size-full" src="https://thejulycontrary.com/wp-content/uploads/2014/07/HomeBlue-e1405553472455.png" onmouseover="this.src='https://thejulycontrary.com/wp-content/uploads/2014/07/InvHomeBlue-e1405629063438.png'" onmouseout="this.src='https://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!