Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member jabbamonkey's Avatar
    Join Date
    Oct 2014
    Posts
    4
    Member #
    40547

    Exclamation Responsive Design Not working...

    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?
    Attached Images Attached Images
    Last edited by jabbamonkey; Oct 24th, 2014 at 08:46 AM. Reason: URLs removed for privacy

  2.  

  3. #2
    Junior Member jabbamonkey's Avatar
    Join Date
    Oct 2014
    Posts
    4
    Member #
    40547
    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....
    Last edited by jabbamonkey; Oct 23rd, 2014 at 11:57 AM.

  4. #3
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    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

  5. #4
    Junior Member jabbamonkey's Avatar
    Join Date
    Oct 2014
    Posts
    4
    Member #
    40547
    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.

  6. #5
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    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.

  7. #6
    Junior Member jabbamonkey's Avatar
    Join Date
    Oct 2014
    Posts
    4
    Member #
    40547
    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 06:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com