ECommerce reactive and catalog layouts and products

Hello

I recently migrated to Zen Cart to Business Catalyst. I downloaded a bootstrap model 3 of bcgurus catalyst for Bootstrap 3 model business and went to the city. I love it but my shopping catalogue does not bend to my will.

My ecommerce site is here: http://oldwestpokersupplies.com/shop

I have problems with the flexibility of the catalog and product list layout. The General layout is just static and won't break any down. The small individual product presentation divs overlap. I searched for hours and I've tried everything I can find to throw at it, but it will not only act as I want that.

Here's what I want.

A simple four-column layout catalogue and product (as is the case) that is also sensitive. Here are my layouts of the model of module and my associated CSS...

______________________

Overall, HTML layout:

< div class = "page_content container" > {tag_cataloguelist, 4, true,} < br / >

< / div >

< div class = 'container page_content' >

{tag_productlist, 4, 50, true,}

< / div >

Individual catalogue layout HTML:

< div style = "" text-align: center; "class ="erase the catalogue shop">"

< h5 > {tag_name} < / h5 >

< div class = "image" > {tag_image} < / div >

< / div >

Catalogue of CSS:

.shop-catalogue {
    background: #D9CFBD;
    border: 1px solid #73674F;
    margin: 0 10px 10px 0;
    overflow: hidden;
    box-shadow: 2px 2px 1px #888888;
    height: 275px;
    width: 275px;
    float: left;
}



.shop-catalogue .image {
    /* Image size should be 150px by 120px */
    height: 175px;
    margin: 0 auto;
    overflow: visible;
    padding: 5px;
    text-align: center;
}

______________________

Each product - Small - HTML:

< div class = "shop-product-small col-md-3" style = "" text-align: center; ">"

< div class = "image" > {tag_smallimage} < / div >

< br / >

< h5 > {tag_name} < / h5 >

< div
Class = 'price' > available:
{tag_instock} < strong > < facilities >
Price: {tag_saleprice} < strong > < / strong > < / div >

< br / >

< div class = "price" > {tag_addtocartinputfield} {tag_addtocart} < / div >

< / div >

Individual product - small - CSS:

.shop-product-small {
    background: #D9CFBD;
    border: 1px solid #73674F;
    color: #756952;
    height: 300px;
    width: 275px !important;
    margin: 10px 10px 10px 10px;
    box-shadow: 2px 2px 1px #888888;
}

I hope that I haven't missed the code too terribly. Thank you in advance for any help you can provide.

I think that will do the trick...

change this in the css

ul.catalogueList { list-style: none;}
.shop-catalogue {
     background: #D9CFBD;
     border: 1px solid #73674F;
     height: 260px !important;
     width: 100% !important;
     margin: 0 0 25px 0;
     box-shadow: 2px 2px 1px #888888;
  /* float: left; */
  /* list-style: none; */
}

Class of layout changes catalog = 'col-md-3' to the class = "col-lg-3 4 - md - neck collar-xs-6"

I did all this with the console, you may need to tweek things according to your needs...

It may be useful

Tags: Business Catalyst

Similar Questions

Maybe you are looking for