7

I am having an issue where my website looks off on an actual mobile device, but when I resize the screen on my computer it looks just fine. This is within an iframe also, and looks fine outside of the iframe on a mobile device. Below is the actual URL, click on search for a player and you wills see the page.

http://adidasuprising.com/adidas-grassroots-mens-events/adidas-gauntlet-series/dallas/

UPDATE

Looks like someone else has this issue. (Responsive)Table Width does not fit the container inside iframe on ios safari

Desktop Resized

enter image description here

Google Chrome on iPhone

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mike Flynn
  • 22,342
  • 54
  • 182
  • 341

4 Answers4

6

I fixed it with this from this page.

 iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }
Community
  • 1
  • 1
Mike Flynn
  • 22,342
  • 54
  • 182
  • 341
1

Add 

<meta name="viewport" content="width=device-width, initial-scale=1">

inside <head></head>, I guess you missed on that.

Zee
  • 8,420
  • 5
  • 36
  • 58
0

You can't make table responsive, unless you use a JS solution.

Furthermore, your table is in an iFrame, so you have to set a scroll to it.

In your media query set the width to the iframe:

#exp-schedule-container {  width: 1200px; }

and set the scroll to the exp-schedule:

#exp-schedule { overflow-x: scroll; }
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
  • 1
    I mean responsive in wrapping it in a div that scrolls. I dont have access to the outer frame like that. This has to be something more. – Mike Flynn Apr 24 '15 at 12:49
0

I'm not sure if I understand your Question. You want to Scroll the Table on the mobile device right?

So you've to close the iframe in a div;

<div class="scrollablewrapper"></div>

css

.scrollablewrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: fixed; 
right: 0; 
bottom: 0; 
left: 0;
top: 0;
}

.scrollablewrapper iframe {
height: 100%;
width: 100%;
}
Green Microchip
  • 43
  • 8
  • Yes but if you went to a player page you can see that the page stretches and doesnt responed to teh 480px viewport. It does without the table. Also I dont have access to the outer iframe. – Mike Flynn Apr 27 '15 at 12:50
  • If you don't have access to the outer iframe can you change something else? [ For example the body with a fixed width and "overflow:scroll;" ] – Green Microchip Apr 27 '15 at 12:56
  • Where is the fixed width? I can make it scroll if necessary but the problem is, shouldnt the page take into account the viewport of 480px on my phone ? It does if I remove the tables from the page. You can also see on my desktop it works as expected, just not on an iPhone. It even works on Android. The table scrolls, but I only want to the width to fit the viewport which it doesnt on iPhone. – Mike Flynn Apr 27 '15 at 13:04
  • Ah allright, so you're question is only Iphone specific? Give me a few minutes. I'll try. – Green Microchip Apr 27 '15 at 13:11
  • 1
    I see, nice hack with ( iframe { width: 1px; min-width: 100%; *width: 100%; }). On Iphone 5 I don`t see any problems. – Green Microchip Apr 27 '15 at 13:23