Return to Support

tables display

Home Forums Graphene Mobile Neo Support tables display

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #9847
    jsherman
    Member

    Just purchased and installed NEO with a GRAPHENE theme site. My site: http://www.cascadelaserengraving.com 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

    #44716
    jsherman
    Member

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

    #44717
    Quote:
    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.

    #44718
    jsherman
    Member

    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.

    #44719

    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>

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

    <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:

    http://www.w3schools.com/cssref/pr_class_float.asp

    #44720
    jsherman
    Member

    thank you. I will experiment

    #44721
    jsherman
    Member

    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

    #44723

    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.