Announcement

Collapse
No announcement yet.

Two Columns of Products and Sections down to Smaller Mobile Devices

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Two Columns of Products and Sections down to Smaller Mobile Devices

    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:
    Code:
        .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:
    Code:
        #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:
    Code:
        .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:
    Code:
        .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:
    Code:
    @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

    Code:
    <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:

    Code:
    <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
    Code:
    <div class="d-block d-flex-sm flex-wrap footer-product-list">
    ******************************

    All line values are approximate and posted without warranty.

    Thank you!
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk
Working...
X