Back to Top
Five Column Block Big Cartel Theme

5 Column Block

Suitable for Big Cartel’s Block Theme

Free

Widen the layout of Big Cartel’s Block theme and create 5 column product pages.

All-CSS installation means 5 Column Block works for any Big Cartel account plan and 3rd party hosting is NOT required.

Free Extras are provided as a courtesy to Aarcade and Big Cartel users. Aarcade does not provide support for the use of the information and coding provided herein. Any related support requests will not receive a response.

If you have questions regarding Big Cartel, please visit Big Cartel Help.

See installation instructions below.

Instructions

Make sure you have Big Cartel’s Block theme installed before proceeding with the following instructions. This extra will only work with Big Cartel’s Block theme.

Copy all of the code below and paste it into your custom style section of your Big Cartel Customize design > Advanced – CSS area. Paste the code at the very end of the CSS area and do not overwrite any existing code.

For further details on the correct location for pasting this code, refer to Where do I add custom style coding in my Big Cartel theme controls?

/*============================================================
Style Name: 5 Column Blocks
Style URI: http://ok.aarcadethemes.com/product-item/5-column-block/
Description: Custom CSS to widen Big Cartel's Block theme
Author: Aarcade
Version: 1.0
Author URI: http://www.aarcadethemes.com/
============================================================*/

/*============================================================
Increase width of main content containers and adjust padding
and margins
============================================================*/

#store {
	width: 1010px;
	padding: 0 0 50px 0;
	}

#main {
	width: 960px;
	padding: 35px 25px;
	}

html #main {
	width: 1010px;
	width: 960px;
	}

ul#home_products {
	width: 925px;
	margin: 0 0 14px 20px;
	}
	
/* - - - - - - Fix Mini Cart Position */
	
#minicart {
	right: 0;
	}

/*============================================================
Increase product grid spacing
============================================================*/

#product_list li {
	margin-right: 6px;
	}

/*============================================================
Increase width of extra products and tidy up positioning
============================================================*/

#products_extra {
	width: 1010px;
	margin: 35px -25px -35px -25px;
	}

#products_newest,
#products_top_selling {
	width: 467px;
	margin: 20px 0 0 25px;
	}

/*============================================================
Increase width of product page elements and tidy up
positioning
============================================================*/

#product_display {
	width: 925px;
	margin: 0 0 14px 18px;
	}

#product_info {
	width: 558px;
	}

#product_name {
	width: 481px;
	}

#product_info .product_price {
	right: 615px;
	}

#product_options {
	width: 316px;
	margin-right: 167px;
	}

#product_options select {
	width: 307px;
	}

#main ul#option {
	width: 282px;
	}

#main #product_inventory ul {
	width: 508px;
	}

#product_inventory .inventory_option {
	width: 457px;
	}

/*============================================================
Increase width of cart elements and tidy up
positioning
============================================================*/

ul#cart_contents {
	width: 960px;
	margin: 0;
	}

.item_info {
	width: 629px;
	}

#cart_shipping,
#cart_discount {
	width: 960px;
	margin: 0;
	}

#cart_shipping h2,
#cart_discount h2 {
	width: 282px;
	}

.cart_total {
	width: 127px;
	margin: 25px 0;
	}

/*============================================================
Increase width of error message and clear margin
============================================================*/

#home #error, #home #error_noscript,
#product #error, #product #error_noscript,
#cart #error, #cart #error_noscript {
	width: 960px;
	margin: 0;
	}

/*============================================================
Increase width of footer elements to align with grid
============================================================*/

#footer .pod {
	width: 167px;
	}