Home › Forums › Graphene Mobile Neo › Support
tables display
-
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
ModQuote: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.
ModIn 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:
ModI 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.