Ethos Theme - Church Demo : Problems with shop layout on mobile - infinite space to right of all pages

Support
#1

Hi Support, we are having issues with all Woocommerce pages when on Mobile. The problem is;

when access any shop, single product, cart or checkout page, the content does not stay centred because there is a infinite amount of white space to the right. IE you can scroll left on any of these pages indefinitely, but there not content to be displayed? In general this is causing the shop to look not very mobile responsive.

Other pages home, faqs, about look fine.

*note we used the Church Demo Content to create our site because we were on a deadline.

WordPress 4.8.1
WooCommerce 3.1.2.
Plugins active : Cornerstone, woocommerce, slider revolution and contact form 7.

Older article https://theme.co/apex/forums/topic/mobile-version-of-ethos-fit-not-fit-problem/ does not fix my problem.

I am not a developer, so please keep it simple. Any help will be appreciated.

#2

Hi there,

Thanks for posting in.

Would you mind providing your site’s URL? If it’s behind a coming soon page then please provide your login credentials in a secure note :slight_smile:

That thread is too old, your issue might be different.

Thanks!

#3

Thank you Rad, I have provided a link to our staging site in our a secure message. You can have a play on Mobile or tablet. Please make sure you are not scrolling down that the same time as try to go left.

#4

Hello There,

Thank you for providing the url of your site. It turns out that you are using an older version of the theme. X 5.1.1 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#5

Hi Rad, I have updated Theme X to the latest version. This has resolved the infinite scrolling to the left issue. In general everything looks much better. The only issue I see that remains is on the checkout page, the container, from fields and text still are still a little too big and go off screen on mobile. When you are filling the forms out and using the next > arrow, it cause the form to move around slightly, which in my opinion is not too user friendly. How can we constrain this woocommerce page a little?

#6

Hi there,

I checked the website using the given staging URL and see no effect like you described. Would you please kindly give us a screenshot or screencast of the problem to identify?

Also, give us the OS and phone model which you check the case.

Thank you.

#7

iPhone 6 Plus. Latest ver of IOS. Browser is Chrome latest version.

Images did not upload in correct order however.

Image 2. shows the form very centered
Image 3. shows what the form looks like when typing text to the First Name field.
Image 4. shows what the form looks like when typing text to the Last Name field.
Image 1. shows what the form looks like when typing text to the Company Name field

I dont like the fact it moves around like this an causes the text to be off screen.

Thank you.

#8

Hi there,

That’s the standard behavior of the mobile browser, it’s a zoom effect to focus an input field if the text is too small. As you will notice, it only happens when an input field is focused (with border highlights).

Please check this https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone

And you may apply the suggested CSS there, looks like 16px is the safe size for inputs.

Thanks!