Using tables in responsive layout

  • Author
    Posts
  • #10143
    ohssoccer
    Member

    I’m using a number of tables for schedules. It is important that the schedules look good on smaller screens as parents and students will frequently check the schedule on their phones. Unfortunately, after a number of tests, the highest number of columns I can see in the mobile version is 4 without things getting ugly and content overflowing.

    Examples are on the following pages: (Note, for the last one I copied to the table example from the Standard theme demo and added two columns to ensure that the problem wasn’t with my own table html/css formatting)

    http://ohssoccer.com/2012/06/10/summer-games/
    http://ohssoccer.com/menssoccer/
    http://ohssoccer.com/test/

    Any thoughts on how I can fix this?

    The blog I need help with is: (visible only to logged in users)

    #10319
    ohssoccer
    Member
    Original poster

    I shouldn’t have said “mobile version”. I do not have wordpress’s mobile version turned on, as I prefer to take advantage of Standard’s responsive layout. Interestingly though, I did a test and temporarily turned on the wordpress mobile version and the table sizes correctly on my phone without overflow. However, I don’t care for the way the rest of the site looks using wordpress’s mobile theme and would rather fix the table so it looks good on small screens in the responsive layout.

    #10331
    manovotny
    Member

    ohssoccer : :

    There is only so much responsiveness can do out of the box when you have so much information to display like that in a table. Even if you remove just one column, the responsiveness works just fine.

    Now, we are not suggesting that you have to remove a column. You can leverave CSS media queries to change the font size of the table once the responsiveness hits a certain size.

    Since it is pretty obvious that you have the Custom Design upgrade, you can add the CSS below to your custom CSS to address the issue.

    @media (max-width: 480px) {
        table { font-size: 10px; }
    }

    And that should take care of it!

    Give it a shot and let us know how that looks to you.

    #10333
    ohssoccer
    Member
    Original poster

    A year ago, @media didn’t work in the custom design upgrade – but maybe they’ve upgraded… Will give it a shot. Thanks!

  • The topic ‘Using tables in responsive layout’ is closed to new replies.