Need help adjusting Storefront page from 2 columns to 3 for picture categories

[Miss Kate]

I want to change my home storefront page so I have 3 columns rather than 2. This will alleviate major scrolling down to see my picture categories. I've tried several things and ended up putting them back to where they were because it wasn't doing what I wanted. Can someone help me with the code? I think it's just a simple fix. I've tried adjusting this code but when I change it to 3 columns it doesn't make any difference. (col-md-6 col-sm-6) If you want to see the storefront my website is www.misskatescreations.com. Here is the current coding in the Content section:

<!-- Promo box starts -->
<div class="promo">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_1' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_2' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_3' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_4' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_5' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_6' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_7' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_8' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_9' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_10' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Promo box ends -->

<div class="banner-message">
<div class="container">
<div class="row" style="margin:auto;">
<center><h2><mvt:item name="readytheme" param="banner( 'free_shipping' )" /></h2></center>
</div>
</div>
</div>
<!--take About box out<!-- About box starts -->-->
<!--<div class="about">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<h3>About Us</h3>-->
<!--<mvt:item name="readytheme" param="contentsection( 'about-us-homepage' )" />-->
</div>
</div>
</div>
<!-- Featured Products -->
<mvt:item name="readytheme" param="productlisting( 'featured-products' )" />

[lesliekirk]

Try changing all of those

<div class="col-md-6 col-sm-6">

to

<div class="col-md-4 col-sm-4">

You may also need to adjust the placement of the

<div class="clearfix"></div>

[William Davis]

Interesting. I've had similar interests among others for the home page, too long to go into details now.

It might not even be worth the trouble depending on the amount of desktop traffic versus mobile. Not just from a percentage perspective (e.g.: 20% vs 80%), but actual numbers and that convert. How will affect visitors their mobile scroll down? But I still like the idea, especially if its well executed.

What I would like to see that would undoubtedly have a substantive impact in all store owners besides a powerful site search that works, smart conversion widgets on the home page design for both new and especially return visitors. Until I get these two missing pieces from our puzzle, I never will never be satisfied with our store.

Here is how I see my business:

1. ✓ SEO: If they can't find you, they can't buy from you.
2. ⚠ Site Search: If they can't find it on your store, they can't buy it from you.
3. ⚠ Smart Conversion Widgets: If they are not given options/alternatives/reasons to buy from you, they'll buy it from someone who will.
4. ✓ Everything Else (Security, Checkout, Wallets, eMails, Rewards, Social, etc): It's all definitely great, but it's gravy compared to the above.

One can't score a run without passing the three previous bases, nor a grand slam if all bases are not loaded.

[Miss Kate]

Try changing all of those

<div class="col-md-6 col-sm-6">

to

<div class="col-md-4 col-sm-4">

You may also need to adjust the placement of the

<div class="clearfix"></div>

It works! Thank you so much Leslie. I need to still change the clearfix and the row coding but I love what it did for the storefront. Can you explain to me what the coding means?

For some reason it scales the first two photos but then isn't scaling the rest. I'll work on it to see why.

[lesliekirk]

Miss Kate The layout is based on 12. So if you have col-md-6 col-sm-6 - that is half of 12. If it's col-md-4 col-sm-4 that would be 33.3% - or 3 columns. Then col-md-3 col-sm-3 would be 4 columns. The col-md is for the screen size - a medium screen size. For the small screen you have col-sm

Something you may want to try for your settings so it looks better on the small screen is <div class="col-md-4 col-sm-12"> - that means you'll have 3 columns for the larger screen and 1 column on a phone.

As for the images, you might be missing a class for the images. I haven't looked at your site to determine if you are, just sort of giving you the basics

[Miss Kate]

Miss Kate The layout is based on 12. So if you have col-md-6 col-sm-6 - that is half of 12. If it's col-md-4 col-sm-4 that would be 33.3% - or 3 columns. Then col-md-3 col-sm-3 would be 4 columns. The col-md is for the screen size - a medium screen size. For the small screen you have col-sm

Something you may want to try for your settings so it looks better on the small screen is <div class="col-md-4 col-sm-12"> - that means you'll have 3 columns for the larger screen and 1 column on a phone.

As for the images, you might be missing a class for the images. I haven't looked at your site to determine if you are, just sort of giving you the basics

Got it all figured out. Had to change Clear Fix, Row position and the images needed to have img-responsive without a set size. I love it now! Have been wanting to change it for several years now so a customer doesn't have to scroll past the bottom of the screen to see the picture categories. You are wonderful!