Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I widen my Big Cartel Blocks theme layout?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

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://aarfiesx.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;
	}

Last Modified: 30th May, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.