Need help with implementation of JS fiddle

I'm trying to make this work: http://jsfiddle.net/9zVE5/5/

on the table on this page: dev2.magickitchen.com/gifts2.html

I have the sample code here:  http://dev2.magickitchen.com/table-test.html

when I look at it on a mobile emulator, I still need to scroll, although it does stack. I'd like that part to not have to scroll horizontally.

Then on the gifts2.html page, I will try it again and see if the changes you give me work. Thanks.
mel200Asked:
Who is Participating?
 
Jeff DarlingDeveloper AnalystCommented:
Try adding this meta line, then view with your mobile device.

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

Open in new window


I have a sample here.
0
 
mel200Author Commented:
Sorry, I should have had that in there. It's in now, and I still have to scroll on mobile. Thanks.
0
 
Jeff DarlingDeveloper AnalystCommented:
What mobile emulator are you using to test?  I tried on a nexus 6 and it goes to stacked on open.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mel200Author Commented:
I use http://mobiletest.me/. This is what I see.
screenshot
0
 
Jeff DarlingDeveloper AnalystCommented:
ok, I haven't tried that emulator before.

I tried a iOS and Android using Sauce Labs.

sample Android
Sample iOS
0
 
Jeff DarlingDeveloper AnalystCommented:
just tried that mobile emulator on the page that I built.


Samsung Test

I'm not seeing the scrollbars.  Still cutting off some on the right.

Samsung image
0
 
mel200Author Commented:
Is there something I can do to center the table and make it just fill the screen using this fiddle? If not, maybe you could recommend another way to make tables look good in mobile with bootstrap 3? Thanks.
0
 
Jeff DarlingDeveloper AnalystCommented:
How about changing the row CSS to 25% for padding on both the right and left instead of 50% on the left?

like this

    table.responsive td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 25% !important;
        padding-right: 25% !important;
        
    }

Open in new window


Sample here

sample
0
 
mel200Author Commented:
Thanks, I'll have a look!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.