The width of your Zen Cart store front is set by the current template’s stylesheet.  Most websites have the width set as either a percentage (eg 100%) or in pixels (eg 960px).  The width of the default template with Zen Cart – Classic Contemporary Green – is set at 750px, which is quite narrow for today where most visitors (on a computer or laptop) will be using a widescreen display (leaving aside devices such as smart phones and tablets).

In this tutorial, we are going to be setting the width to 1024px.  I prefer using a fixed width rather than a percentage so that I have more control over the design as the center column will be a consistent width for all users.

To change the width of the Zen Cart store front:

1. Open the stylesheet.css file located in the /includes/templates/CUSTOM/css/ directory where CUSTOM represents the name of your current template folder.
2. Find this section of code:

   /*wrappers - page or section containers*/
   #mainWrapper {
       background-color: #ffffff;
       text-align: left;
       width: 750px;
       vertical-align: top;
       border: 1px solid #9a9a9a;
       }

3. and modify the width selector as needed:

   /*wrappers - page or section containers*/
   #mainWrapper {
       background-color: #ffffff;
       text-align: left;
       width: 1024px;
       vertical-align: top;
       border: 1px solid #9a9a9a;
       }

4. Save the modified stylesheet.css file to your override folder.  This will be /includes/templates/CUSTOM/css/ where CUSTOM represents the name of your current template folder.

	Free download: Zen Cart Pre-launch Checklist   Are you ready to launch your new online store? The Zen Cart Pre-launch Checklist has been developed to assist Zen Cart store owners preparing to launch their store. Avoid making any of these common mistakes before you go live.   Download the Zen Cart Pre-launch Checklist