tables display

  • jsherman

    #9847

    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

    jsherman

    #44716

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

    Mod

    Kenneth John Odle

    #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.

    jsherman

    #44718

    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.

    Mod

    Kenneth John Odle

    #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

    jsherman

    #44720

    thank you. I will experiment

    jsherman

    #44721

    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

    Mod

    Kenneth John Odle

    #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.