Fix center box size problem.....
This is my first How-To in 20 years so bear with me...
First...This is the very first time I have EVER used zen cart so I am a Total Newbie (I usually use the Brand-X one). I chose zen cart for it's ease of setup and management, EasyPopulate for updating LOTS of products at once and the RSB template for it's ability to transform for different size browsers. When downloading it I decided what I needed it to do and grabbed all the plug ins I would need. then I installed everything in the following order:
zen-cart-v1.5.4-12302014 (new install)
addons:
Minimum Order (we are a wholesale site)
monthly_sales_and_tax.10 (easy to record & pay our monthly sales tax collected)
MSRP_Display_1_for_ZC_4 (to inform our customers what the price should be & what their markup will be)
Price_Increase_Decrease (so I don't have to increase each and every product 1 by 1)
stats_products_linked-1.0.0 (good info for marketing)
EasyPopulate-4.0-master (my cart is updated via RSS feeds)
I've learned over the years to always install your template LAST, so other addons don't break the layout:
responsive_sheffield_blue_2.0.template (so the cart will work on everything from a mainframe to a wrist phone, yes I had a friend test the site on her Neptune Pine and it looked great)
After installing everything and having a lovely working site with 3 products and 3 categories I stocked it with 3215 products... That's when things started to fall apart... LOL Product names and image names were too long, pictures were not the same size. empty spaces pop up on main page and category pages.
Fixed the name length problem by changing size values in the database directly...
This is how I fixed the problem of having different size center boxes and empty spaces where boxes should be, on my main page and the category pages with guidance from soxophoneplayer.
since my staylesheet.css file had not been changed I found the following line in my:
cartdirectoy/includes/templates/responsive_sheffield_blue/css/stylesheet.css
at line 266 you will find:
Code:
.centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials{border:1px solid #dbdbce;background:#f7f7f7;padding:20px 0px;width:30% !important;transition:background 2s ease; -webkit-transition:background 2s ease;-moz-transition: background 2s ease; -o-transition:background 2s ease;text-align:center;margin-left:15px;margin-bottom:20px;min-height:350px;}
at the very end of the line you will find "min-height:350px" (Without the quotes):
I removed.... min-
I changed... 350px to 450px (I have some tall pictures so the 450 worked for me, test different sizes til you get the min height for your site)
New code:
Code:
.centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials{border:1px solid #dbdbce;background:#f7f7f7;padding:20px 0px;width:30% !important;transition:background 2s ease; -webkit-transition:background 2s ease;-moz-transition: background 2s ease; -o-transition:background 2s ease;text-align:center;margin-left:15px;margin-bottom:20px;height:450px;}
yes it is that simple, once you know where to look... Thanks soxophoneplayer
hope this helps other newbies...
Hivtop