Geek Answers Handbook

Responsiveness on a mobile device with tables not working in iframe

I have a problem when my website goes offline on a real mobile device, but when I change the screen size on my computer, it looks just fine. This also applies to iframes and looks great outside the iframes on a mobile device. Below is the actual URL, click on the player search and you will see the page.

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

UPDATE

It seems like someone has this problem. (responsive) Table width does not match container inside iframe on ios safari

Desktop resized

enter image description here

Google Chrome on iPhone

enter image description here

+7
css mobile responsive-design iframe css-tables
source share
4 answers

I installed this using this page .

iframe { width: 1px; min-width: 100%; *width: 100%; }
+5
source share

Add

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

inside <head></head> , I think you missed it.

0
source share

You cannot make a table responsive unless you use a JS solution.

In addition, your table is in an iFrame, so you need to set its scrolling.

In your media request, set width to iframe:

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

and set the scroll to exp-schedule :

 #exp-schedule { overflow-x: scroll; }
0
source share

I am not sure if I understand your question. Do you want to scroll the table on a mobile device?

So you have to close the iframe in the 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%; }
0
source share

More articles:


All Articles