AARFIE SUPPORT

Please note that this article has been created to help address a popular question amongst Big Cartel users. Aarfie does not provide support for the use of the information in this article. If you have questions regarding Big Cartel or Big Cartel’s default themes, please visit Big Cartel Help.

To widen the layout of Big Cartel’s Blocks theme copy all of the code below and paste it into your custom style area in your Big Cartel admin. To locate your custom style area, refer to the support article Where do I add custom style coding in my Big Cartel theme controls?

View or download code as text file.

/*============================================================
Style Name: Widen Blocks
Style URI: http://aarfiesupport.com/how-do-i-widen-my-big-cartel-block-theme-layout/
Description: Custom CSS to widen Big Cartel's Blocks theme
Author: Aarfie
Version: 1.0
Author URI: http://aarfie.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 18px;
	}
	
/* - - - - - - Fix Mini Cart Position */
	
#minicart {
	right: 0;
	}

/*============================================================
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;
	}