how on earth do I make this responsive?

http://dev2.magickitchen.com/menu/10019-nutrition.html

any thoughts on how I could make this info readable on smaller screens? Thanks!
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
You're using tables, and mixing tables and Responsive in the same sentence doesn't work :)

As a design suggestion I can tell you to make it vertical on small screens. This means transforming all your columns into rows and the user just have to swipe down.

To achieve this easily you should use a CSS grid system like the one proposed by Bootstrap, Foundation or the old Grid960.
All these will adjust "automatically" to your screen size. I've put automatically within quotes because you need to write your html in order to comply with the grid system rules. After that, it's really automatic.
0
Julian HansenCommented:
I would migrate to a responsive template solution like Bootstrap.

Having said that these two posts might help

A fairly comprehensive step-by-step article that discusses the problem and solution
https://css-tricks.com/responsive-data-tables/

This site lists 10 different approaches to responsive tables
http://exisweb.net/responsive-table-plugins-and-patterns
0
lenamtlCommented:
Hi,
Move the class  table-responsive to a DIV instead of the table
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Open in new window


For the reference:
http://getbootstrap.com/css/#tables-responsive
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.

Alexandre SimõesManager / Technology SpecialistCommented:
@lenamtl: I don't think Bootstrap's table-responsive will work for him.
With his amount of columns it will just display the horizontal scroll bar.

With that amount of data (columns) it's necessary to rethink the layout on smaller devices.
0
lenamtlCommented:
Well
For large table I'm using extra pluging that are compatible with Boostrap
Footable
http://fooplugins.com/footable-demos/
or
Bootstrap Table see Large Columns example
http://bootstrap-table.wenzhixin.net.cn/examples/

This allow to display extra information with a toggle (I prefer this solution) using Footable
or to select only the column user want to see using column selection using Bootstrap Table
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alexandre SimõesManager / Technology SpecialistCommented:
Still, don't hit me (too much at least) but these are elastic solutions, not responsive.

A Responsive solution is one that truly transforms itself in order to give the best experience to the user based on the available space.
An Elastic solution just makes sure everything fits in the screen, doesn't really matter if it looks good or readable in all form factors.

Anyway, if the elastic is good enough (or if the client didn't pay enough for the responsive version), elastic is way easier and faster.
0
lenamtlCommented:
Well using Footable it is based on same logical to set @media and breakpoint, this is the same logical of Bootstrap.
Anyhow I do not want to argue, I'm using this from long time and never add any complains.

Also if you want to add feature like paging,filtering it's going to be easier.
0
mel200Author Commented:
Thanks to all! I'm using Bootstrap for this site, something I should have mentioned at first. I'll have a look at what you propose.  I guess I could base it all on a bootstrap grid, it's an awful lot of information to scroll down through.
0
mel200Author Commented:
fooTable looks interesting, I'll give that a try. I may need a bit of help with that, may I ask questions about it here?
0
lenamtlCommented:
Yes no problem, I guess..
There are a lot of demo pages on their site.
0
mel200Author Commented:
OK... I feel I have this set up correctly, but it isn't working.

http://dev2.magickitchen.com/menu/10019-nutrition.html

The breaks I have might not ultimately be the ones I use, but right now I don't see anything on mobile.
0
Slick812Commented:
greetings mel200, , I can not suggest a "easy" or straightforward way to have your second Table as -
     <table class="table table-responsive stats" cellspacing="0">
become responsive, because you have set it up as an "Old Fashion" row and column display. Since this has eleven columns and twelve rows, there is no way to maintain that row-column ordering in a narrow phone display and get maybe get 4 or 5 columns, but no way to have 11 columns that are readable.

It has helped me greatly, to abandon the old thinking in web page design, and Start with a narrow phone view, to begin my web site development, build a narrow user friendly page FIRST, with "hidden" extra information elements, and have a "Touch Point" to show the extra info as pop-ups or slide ons, and then with CSS or bootstrap look at it in a tablet and add larger content, maybe more columns, and then finally look at it in larger laptop view, and have more content initially shown, with bigger size elements and expanded arrangement.

For the nutritional amounts  you have in the second table, I might not use a table, But I would start with a 4 column view, I'd move the Kcal amount under the meal for that title column like -
    Meal 1:
  267 Kcal
and to it's right, just display the three components values columns-

                     Protein   Carbs    Fat
    Meal 1:        30         23         6
  267 Kcal

    Meal2:


- - - - - - - - - -
then above the display have text that says, "touch Meal row to see more nutritional component values"
and then when touched, it will show a "Pop-Up" <div> above the row, with the rest of the values like Chol and Fiber
0
lenamtlCommented:
Hi,

You should use <thead> <tr> <th> and set the data-hide only to this
<thead>
    <tr>
        <th>Column always shown</th>
        <th data-hide="phone,tablet">Column hidden on phone and tablet</th>
        <th data-hide="all">Column always hidden</th>
    </tr>
</thead>

Open in new window



Check the Core Data Attributes section in the demo.

Here is the js code I'm using

$(function () {
          $('table').bind('footable_breakpoint', function() {
           $('table').trigger('footable_expand_first_row');
          }).footable();
        });

Open in new window


PS do not set width to columns or you will have problems
0
mel200Author Commented:
Ok, thanks, everyone. I think this may be over my head. I will hire someone to do what I need. But the FootTable is the correct thing, so I'll award points.
0
mel200Author Commented:
This will work well, thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

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.