Tables not fitting within Graphene Mobile Theme

  • italoamericougar


    I have been using Graphene for years and it is working great. I recently updated my website with Graphene Mobile. The most important part of my website are tables where one column describes books and the second column shows adds to Amazon for those books.

    When I updated to Graphene Mobile, this second column is cut off from the initial page view. If one zooms out one can see the second column, but I do not want my users to have to do this. I know that I can change the size of the Tables, but this will affect the layout of the Tables in the normal Graphene theme, and I don’t want to do that.

    I would like to be able to change how Graphene Mobile views the Tables without changing the Tables themselves. Does anyone have any suggestions. Here is a link to one of the webpages in question. If you load on a computer you will see the nice layout of the Table. If you then load on a mobile device you will see that the second column is essentially cut-off.

    Thank you for your suggestions.


    Syahir Hakim


    The easiest would be to add the following code in Graphene Mobile Options > Display > Custom CSS:

    .post-294 .entry-content table {
    width: 100%;



    Thank you, that works great for the specific webpage that I listed in my original post. I have numerous pages on my website in this tabular format. Is there a way to make that Custom CSS code applicable to all the tables on my website, or to all the pages on my site?


    Kenneth John Odle

    .entry-content table {
    width: 100%;

    will probably work, but using tables for layout is not good practice, as you have discovered.

Viewing 4 posts - 1 through 4 (of 4 total)

  • You must be logged in to reply to this topic.