Menu icon Foundation
Issues with table within a div

I am having issues with a table not scaling down when viewed on mobile devices. I have placed the table within a div that has classes of "small-12 medium-12 large -12 columns" and I am having no luck getting it to scale down. I have created a variety of media queries to swap text and images to make it mobile friendly but I am having no luck with the container scaling down the entire table. Any thoughts or am I doing something wrong?

The page can be viewed here: http://www.chooseworkttw.net/about/meet-your-employment-team/index-test2.html

Thanks

tablemobileResponsivedivcss

I am having issues with a table not scaling down when viewed on mobile devices. I have placed the table within a div that has classes of "small-12 medium-12 large -12 columns" and I am having no luck getting it to scale down. I have created a variety of media queries to swap text and images to make it mobile friendly but I am having no luck with the container scaling down the entire table. Any thoughts or am I doing something wrong?

The page can be viewed here: http://www.chooseworkttw.net/about/meet-your-employment-team/index-test2.html

Thanks

Jeff Richards over 4 years ago

Thank you, I will try to adjust the type size to have it small enough to fit.

Rafi Benkual over 4 years ago

Only the Foundation responsive table have to scrolls, the others collapse into cards.

I tried making the font-size: 0.75rem; and it fit on my iPhone 6.

You can test in Safari on your iphone using the inspector.

Jeff Richards over 4 years ago

Thank you for the reply, I have tried the responsive table options but the client doesn't want to scroll at all. I am kind of in a box at this point.

Rafi Benkual over 4 years ago

I think you're still running out of room. The Text can't wrap and the padding takes up space so the cell cannot shrink any further. In the inspector I was able to shrink the images and text and then it all fit.

I would suggest a responsive table solution instead: