The Column issue with Fragments

[Buzby]

Has anyone resolved the column issue with the Swift Design?

I'm eager to go live with it, but feel this is a real issue that makes everything look poorly designed, and unfinished.

Has anyone come up with a workaround to get fragments to display in a single column yet?

I have been having a play using layouts instead of fragments which I can get to work, but it is very messy to implement and not an ideal solution, so I would only go down this route as a last resort.

My example https://www.titanjewellery.co.uk/Swi...-Security.html

[graphicz]

As you go through this please refer to the image at the end.

In Design Library go to Product Lists and right click and copy 'Responsive Product List' twice.

Rename one 'Responsive Product List Products' and one 'Responsive Product List Fragments'

Open each in turn, in the product one remove all the fragment stuff and in the fragment one remove all the product stuff: see image at end...

In the Fragment one open 'Click Here to Edit List Layout Settings',

Click the 'Edit Rows and Columns' tab

Under No Of Items, Middle rows delete 'dynamic' and replace it with 1.

Click Overal Design, change <div class="product-list"> to <div class="product-listx">

Add to stylesheet:

@media (min-width: 768px) {
.product-listx > div, .product-listx > .product-details {
padding-left: 15px !important;
padding-right: 0 !important;
padding-top: 15px;
margin-bottom: 30px;
width:100%
}
.product-listx {
width:100%
}
}

In Section Page Body, comment out 'Product List'
And add your two new layouts Fragment one first.

 <!--<actinic:variable name="ProductList" />-->
<actinic:variable name="ProductList" value="Responsive Product List Fragments" />
<actinic:variable name="ProductList" value="Responsive Product List Products" />

The problem now is that you will get empty divs in the fragment list where products should be and empty divs in the product list where fragments should be!

This is solved thus:

Add this above the two layouts in the Section Page Body

<script>
$("div.product-details").filter(function(){
return $(this).text().trim() == ""
}).remove();
</script>

Add to stylesheet:

.product-details:empty {
display: none!Important;
width:0;
margin:0;
padding:0;
border:0;
}

NB. This only works in the live site, you will see the empty divs in preview.

See it here: https://www.graphicz.solutions/onefr...log/Rings.html

[graphicz]

The other thing to mention is that in Swift the Section Description now appears at the top of the section page which will sometimes remove the need for a separate fragment - maybe?

[Buzby]

Many thanks for that Jonathan, it works perfectly.

[graphicz]

Thank you Jason

[Seorch]

Clear, easy to follow instructions, thanks Jonathon.
I've noticed a slight delay in page time changing since the design change but I can live with it for the benefit.
I've made the Layout "Subheading and text right of image" as the fragment title looks like a duplicate of the page title.