Two Columns of Products and Sections down to Smaller Mobile Devices

[graphicz]

A client whose site has very many products per section questioned the breakpoint that goes to a single column of products and sections in a mobile device, currently 767px. Saying that many mobile phones were larger nowadays he wanted mobile users to see two columns of products and sections, at least down to smaller devices.

Whilst this is not to my taste, this is how to do it if anybody wishes to try it. Always taka a snapshot first and copy the Swift Stylesheet and the following layouts so you have a backup: Customisable Product Layout plus any variants of it (Tabber for example), Responsive SubSection List and Best Sellers and New Products lists.

Swift Stylesheet

line 3355: (or search '.product-list>div' it is within a block of styles:@media (max-width:767px) {:
remove:

    .product-list>div {
        margin-bottom: 35px;
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
    }

line 4176: (or search '#FilterResultElements .std-product-details' it is within a block of styles:@media only screen and (max-width:767px) {:
remove:

    #FilterResultElements .std-product-details {
        width: 100%;
        margin-bottom: 35px;
    }

line 4517: (or search '.marketing-list-entry' it is within a block of styles @media only screen and (max-width:767px):
remove:

    .marketing-list-entry {
         width: 100% !important;
         max-width: 100% !important;
         position: relative;
    }

line 4886: (or search '.footer-product-list>div' it is within a block of styles @media only screen and (min-width: 768px)
remove:

    .footer-product-list>div{
        padding-right: 0;
        padding-left: 15px;
        padding-top: 15px;
    }

At the bottom of the stylesheet (but before 'CSSDefinition;' if used): paste:

@media (max-width:576px){
    #FilterResultElements .std-product-details {
        width: 100%;
        margin-bottom: 35px;
    }
.product-list>div {
        margin-bottom: 35px;
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
    }
}
@media (min-width:577px) and (max-width:991px) {
.product-list>div {
        width: 50%;
        margin-bottom: 30px;
    }
        #FilterResultElements .std-product-details {
        width: 50%;
    }

.sb-product-inner, .sub-section-section .sub-section-col, .fragments .thumbnail-custom, .fragments .sub-section-col {
    padding-left: 15px !important;
    padding-right: 0 !important;
margin-bottom: 2em;
}
}
@media (min-width:577px) and (max-width:991px) {
.product-list > div, .product-list > .product-details {
    padding-left: 15px !important;
    padding-right: 0 !important;
    padding-top: 15px;
    margin-bottom: 30px;
}    
}    
@media (max-width:576px) {
.marketing-list-entry {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
}
}
@media (min-width:577px) and (max-width:767px) {
.marketing-list-entry {
    width: 50%;
}
}
@media (min-width:577px) {
.footer-product-list>div{
    padding-right: 0;
    padding-left: 15px;
    padding-top: 15px;
}
}

*****************************

Customisable Product Layout: and variations - Tabber etc

Change:col-md-5, col-md-7, mt-md-0 to sm

<div class="col-sm-5 col-12 text-center d-flex align-items-center product-image-wrapper">
<div style="width: 100%;" class="py-15"><actinic:variable name="ProductImageLayout" value="Standard Product Image" /></div>
</div>
<div class="col-12 col-sm-7 mt-4 mt-sm-0 px-xs-0">

*****************************

Responsive SubSection List

Edit Rows and Columns - First - Middle - Last:
Change:md to sm:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Section%22" >
        <div class="col-lg-3 col-sm-6 col-12 sub-section-col">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22" >
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e" >
        <div class="col-lg-4 col-sm-6 col-12 sub-section-col">
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e%3d%3dFALSE" >
        <div class="col-lg-3 col-sm-6 col-12 sub-section-col">
    </actinic:block>
</actinic:block>

*******************************

Responsive Best Sellers List and Responsive New Products List

Overall Design: Start of List: d-flex-md to d-flex-sm

<div class="d-block d-flex-sm flex-wrap footer-product-list">

******************************

All line values are approximate and posted without warranty.

Thank you!