full width fragments

[chickenhouseman]

I'd like to use a full width fragment above my 3 product columns.

I'v got this to work ok when I preview the page by in design mode the fragment runs across the right hand column.


any ideas?

[graphicz]

In design library product lists, right click on 'Responsive Product List' and copy it so you have a backup.
Double click 'Responsive Product List' to open it.
Click on the orange text at the top that says 'Click here to edit list layout settings'
Click on 'Overall Design' and the edit button to thr right of 'Start of List'
Copy what is there to a text file:

	<div class="product-list<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductColumnCount%22%20%2f%3e%20%3d%3d%202" > twoColumns</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductColumnCount%22%20%2f%3e%20%3d%3d%203" > threeColumns</actinic:block>">

Change what is there to

<div class="product-list">

Click on 'Edit Rows and Columns'
Click on First Row/No. of items and type 1
In the first row First item before

<div class="product-details">

In the first row First item after

</div>

In the first row in the box 'After Row'

</div>

and paste the line you copied earlier, so it looks like this:

</div><div class="product-list<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductColumnCount%22%20%2f%3e%20%3d%3d%202" > twoColumns</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductColumnCount%22%20%2f%3e%20%3d%3d%203" > threeColumns</actinic:block>">

Apply and OK.

This is fine if every section has one full width fragment. If some don't you will have to rename your copy of Responsive Product List to something like Responsive Product List Original and select this Product list in the Section Details, Layout, Product List Layout.