Support » Themes and Templates » Table Rescale in TwentyFourteen theme (mobile)

  • Resolved mannyotr

    (@mannyotr)


    Using tables (yeah, I know) on my child theme and when viewing the page on a mobile device like an iPhone the tables don’t rescale.

    Here’s sample page.

    A the bottom of that page there are three tables with many columns that look like this on a mobile device.

    Please help.

    I know using tables is a no-no, but for now I have to keep them.

    Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Helloo,

    I would give the table a class – like this:

    <table style="border-color: #666; width: 700px;" cellpadding="10" class="responsivetable">

    And in your css you can place this:

    table.responsivetable { width: 100%!important; }

    Make sure to put in in the right media query 🙂

    That didn’t work. But the more I look at it the more it seems to be more of an issue with the way the entire page is displayed on a mobile device.

    I’m gonna start a separate thread about that.

    Is see it, I go check 🙂

    Aah oke, it is because of all the extra padding and colspans you used everywhere.

    It is totally a tables problem! I can see it has nothing to do with the entire page. – If you check the partners page it looks fine on mobile devices 🙂

    I would first try to add:

    table.responsivetable td {padding: 10px 0px!important;}

    And add the class to ALL the tables.

    And then you can get a good look where it goes wrong.

    Anna,

    I have added the responsivetable class to all tables and also added the CSS code to the twentyfourteen-child/style.css file. I also removed all the padding references.

    Still seems to be doing the same thing on mobile.

    But the other code is gone now..
    and you did 10px padding instead of 0px 🙂

    Try to add this in your child css:

    @media screen and (max-width: 400px) {
    table.responsivetable td {padding: 10px 0px!important;}
    table.responsivetable {width:100%!important;}

    }

    That is not going to fix everything but we should get 1 step closer 🙂

    Thanks! I have added that code to the child CSS file.

    And you have to delete the other code that you put at the bottom:

    table.responsivetable td {padding: 10px 10px!important;}

    Oh sorry! I missed that.

    I deleted that code and it seems to have helped a little bit. It’s definitely better than before. Not perfect, but better.

    Nooo not perfect… 🙁 those damn tables haha

    Can you replace the code with this:

    @media screen and (max-width: 400px) {
    table.responsivetable td {padding: 10px 0px!important;}
    table.responsivetable {width:100%!important;font-size: 11px;}
    table.responsivetable img {width: 11px;}
    }

    Awesome! That seems to have done the trick!

    Thank you so much!

    Yeahhh! Now I can go to sleep peacefully 🙂

    Goodnight and succes with your website!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Table Rescale in TwentyFourteen theme (mobile)’ is closed to new replies.