Responsive Design Not working...

[jabbamonkey]

I created a site, and made it responsive to the size of the screen. When I view the page in my browser, and reduce the width, the site adapts to the screen size and "shrinks" horizontally. I also testing this site on my own server, and the site worked fine on my mobile device (reducing in size).

However, we just switched servers and the site has some issues with the responsive design. For example, when I view in my mobile device now, it shows the smallest version of the site, at about 25% of the screen. See the attached.

IMAGE REMOVED

I'm not sure what is going wrong. I "think" it might have something to do with the server configuration (although, my hardware knowledge is limited, and my hardware guy isnt around for questions). We switched the site from my test environment over to sitename.parentsite.org ... when this happened, the problem started occurring. When I look at www.parentsite.org on my phone, I am redirected to m.parentsite.org ... could the server have some setting for mobile sites that is messing with my mobile design??? If so, what do I tell the server people that they need to change? Or is it something else?

[jabbamonkey]

Also tried online mobile emulators ... the online emulators all show the site fine. However on my actual phone (HTC X One) and my friends phones (iPhones), it shows up with a huge white space to the right....

[Vapr_Arts]

Give it a little time man.. Someone will help u if they can..

What i can tell u is "responsive" doesnt mean u have a mobile site (like the m.parkinson.org)

Responsive means the content responds to a devices screen.

Im on mobile now so i cant help u but ill look at it as soon as i get a chance and im on a desktop


Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

[jabbamonkey]

Our IT guy said it "can't" be the server. However, I don't know if he's jerking us around.

Below are some tests from people's phones ... seems very random...

PROBLEM
I'm having the problem on my HTC One X (AT&T) using Chrome had the issue.

PROBLEM
Two people with an iPhone (AT&T) using Safari had the issue.

NO PROBLEM
One person with an iPhone (AT&T) using Safari or Chrome didn't have an issue.

PROBLEM
One person with a Samsung (Verizon) had the issue.

NO PROBLEM
Someone with an iPhone 5s (T-Mobile) using Safari isn't having the problem.

[sasha_bolcina]

Problem can be reproduced on any device. If you try to reduce browser width, you will soon notice bottom scroll bar. On the mobile Android Chrome I can simply drag page to the left, because there is very wide white space on the right.

Problem is in div with id 'vidz' and next ul. Some script (I have no time to search and find which one exactly) is setting the width of these elements. So, 'ul' becomes 2090 pixels wide. Some browsers will display scroller, some phones whitespace, and other phones will stretch content over full screen, but allow drag left to display white space.

Check all "UL" and find the script making problems.

[jabbamonkey]

Awesome. Thanks for figuring that out. The UL tag is from a javascript horizontal scroller that is being used on the page. That scroller content has a width of over 2000px. It only SHOWS 500 pixels on the desktop site, and was supposed to be "hidden" on the mobile site... but obviously, even with the scroller "hidden", it was still stretching the page.

It's fixed now.