CE Phoenix Cart Forum

We all spend so much time on our own stores that we can sometimes become blind to small usability issues.
One of these is long lines of text, such as Category and Product Descriptions, that can stretch the full width of larger screens, becoming harder for customers to read.

As an example, see a Product Description on the Demo - https://phoenixcart.org/demo/product_in ... ducts_id=9


Studies show that shorter line lengths improve readability and engagement with around 60–80 characters per line being best for readability.

An artful use of Modular Layout Addons can automatically fix this in some scenarios, though not always, but a little bit of CSS in your user.css can improve the display.

Using the Product Description in the Demo (an unmodified v1.1.0.0) as an example.
There is a <div> inside the parent with a unique class name - description - which we can use to apply changes.
That will limit the width of that <div> to 80 characters.
So now it will look like this:


Now the line length is good but the resulting left aligned column of text might not be to everyone's taste, certainly not mine.
This is a Product page which has the Modular Layout system built in, so, as previously said, Layout Modules could be used instead.
However, in an unmodified install, Product Description is a Content Module, which is why it is being used as an example here, for when Layout Modules cannot provide the solution.

Anyway, to my taste, the display can be improved by centering that column.
We already have that CSS targeting the <div> so let's add to that.
This will set the left and right margins equally so the <div> will horizontally center.


That's better but, to my taste, the text is a bit 'lost' in all that empty space.
Again, to my taste, that could be improved by simply containing it within a border.
So, adding to the CSS.
This adds a 1 pixel solid black border with rounded corners and some padding for the text.
This now displays like this.


Of course, alternatively, some of that CSS could be added as Bootstrap classes to a modified template file.

As an example of when Modular Layout cannot help, let's use the Category Description.
By default, we could have this.


With similar CSS, we can achieve the same result.
This will then display like this.


This does not affect default responsive behaviours so everything still looks great on small screens.

So, take some time to look at your store again and see where readability can be improved - hint- take a look at your Info Pages and Policies

Just as an addendum to this in response to a client question.

The Category Description was used as an example with the CSS:
While max-width: 80ch; restricts the width to a maximum of 80 characters, it does not shrink if the character content is less than that.
For example, like this:


CSS has an answer for that too, if desired, so add to the CSS:
Setting max-content to the width ensures the element only takes up as much space as its content requires while max-width: 80ch; still does its work.

So now we have a display of:


And:


By the way, you should have noticed in the CSS that this example is using cm-ip-category-manufacturer-description. That is an index_products module.
There is another Category Description module in index_nested, but you remembered that, right?