tables stepping outside the zone

[keat]

I have a number of products where we've put data inside a table.

https://www.beal.org.uk/v6cart/assorted-trim-clips-nissan.html

If you look at the above, you'll note that the table has leeched ouside of the text area.

Rather than me trying to find all these tables and fix them, I wonder if it might be easier to swap the page template around, so the text area is on the left.

Is this possible ?

[bsmither]

The rich text editor (RTE) has a tendency to make sure the table displays as wide as was shown when it was composed. That is, a table drawn to be as wide as the RTE's editor's window (for example, 400px) will have the table's style property set to width: 400px.

It is an unfortunate fact that the RTE's editor window cannot show you exactly what the contents will look like, compared to where the contents will actually finally show.

The <div id="product_detail"> has a width of 295px. The table is 400px wide.

We can try to move the Product Description out of the "product_detail". Or we can try swapping the positions of the "gallery" and the "product_detail".

[keat]

I've been looking to swap the product detail to the left hand side and the image to the right.

I assumed it was somewhere in common.css, but the changes I just performed, made no difference.

 

[bsmither]

I will be able to provide some guidance in a short while.

Please recall that changing templates and CSS will require:

1. Caching be disabled in CubeCart admin, Store Settings, Advanced tab
2. You must force your browser to reload the page's resources (css, javascript, images) otherwise the browser will use its internal cached copies

 

[keat]

I never considered caching would need to be turned off.

[bsmither]

For now, try this:

content.product.php

Near line 56, find:
<h2>{$LANG.catalogue.product_description}</h2>
<div class="product_description">
  {$PRODUCT.description}

Change to:
{* <h2>{$LANG.catalogue.product_description}</h2> *}
<div class="product_description">
{*  {$PRODUCT.description} *}

Near line 117, find:
{if isset($PRODUCT.discounts)}
<div id="quantity_discounts">
  <h2>{$LANG.catalogue.quantity_discounts}</h2>

Change to:
<h2>{$LANG.catalogue.product_description}</h2>
{$PRODUCT.description}

{if isset($PRODUCT.discounts)}
<div id="quantity_discounts">
  <h2>{$LANG.catalogue.quantity_discounts}</h2>

 

[keat]

This has certainly got rid of that table issue, although the more I look at it, the more I think it looks like the V3 site.

I switched back to the previous view, and I think I prefer it.

Maybe I'll look at reducing the table sizes.