tables display

  • jsherman


    Just purchased and installed NEO with a GRAPHENE theme site. My site: uses tables on every page to display graphics and text. My boss really likes the GRAPHENE desktop site but the NEO does not resize the table and items to the right are unavailable. What changes do I need to make for the tables to display properly with NEO? Is there a better way to display the graphics and text than using tables?

    John Sherman



    Ok. I found the responsive table settings but I do not like the results. Are further changes to the table properties help


    Kenneth John Odle

    Is there a better way to display the graphics and text than using tables?

    Yes. Use floats instead. Tables are for tabular data only. Using tables for page layouts leads to the kinds of problems you are having.



    Thank you for your response. I am not very familiar with CSS and have never heard of floats. Do you recommend a tutorial on using floats and converting tables. It is very import to keep the same look and feel.


    Kenneth John Odle


    In Custom CSS feature of Graphene (or in a child theme stylesheet), create this CSS class:

    .js-left {float: left;}
    .js-clear {clear: both;}

    Then, in the HTML for your page, you’ll apply that class to two <div>s:

    <div class="js-left">
    <p>Put your description here.</p>

    </div class="js-left">
    <img src="path-to-image-file" alt="this is the picture" />

    <div class="js-clear"></div>

    Adjust the HTML to suit your needs.

    Basically, the float:left CSS rule tells the browser to float things to the left. We applied it to both <div>s here, so they float to the left.

    The last line of the HTML is necessary because it clears the floats and makes the next two items appear properly.

    w3schools is a good place to learn about CSS. Here’s their page on floats:



    thank you. I will experiment



    I had difficulties getting the floats to show the way I wanted. Using inline-blocks seems to provide the display I want and is mobile friendly. Thank you your help


    Kenneth John Odle


    I didn’t even think about inline blocks, but that is also a good way to go.

    Marking thread as resolved. You can do this yourself as well.

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

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