Webstore Width help

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/6/2012 12:56:38 PM
akrogers
Gravatar
Total Posts 12
View Posts

Webstore Width help

For some reason the webstore is only using about half of the page width.  I've tried unsuccessfully to add width: 100% in the stylewebstore.css file for the .productlist with no luck.  I'd like the products to wrap into two columns and tried this:

.productlist {clear:both;
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
width:100%;
}

but the columns were so narrow because the store is only using half the sheet width.  Any help? Thanks!

4/6/2012 4:11:52 PM
Tomasz
Gravatar
Total Posts 42
View Posts

Re: Webstore Width help

Have you tried to make the 

.modulecontent

{

width:100%;

}

4/6/2012 4:22:33 PM
akrogers
Gravatar
Total Posts 12
View Posts

Re: Webstore Width help

Thanks, but that doesn't work either.  You can see the page at: http://jenniferlaurens.com/store.aspx

You can see how some of the titles and text wrap.

4/6/2012 4:28:07 PM
Tomasz
Gravatar
Total Posts 42
View Posts

Re: Webstore Width help

When I modify in Firebug CSS

.modulecontent {
background-color: yellow;
padding: 5px;
width: 100%;
}

I can see real 100% width

 

...

and then the .productcontainer {width:100%;}

...

ops - 2 column so you have to make the productcontainer  < 50%

4/6/2012 4:36:25 PM
Joe Davis
Gravatar
Total Posts 2254
View Posts

Re: Webstore Width help

The root of the problem is with how the Artisteer CSS is done. It's making .art-layout-cell (.modulecontent) display as a table-cell for some silly reason. You will need to make the following changes:

.modulecontent { width: 100%; }

.productlist { float: none; margin-right: 0;}

.productcontainer {clear: none; width: 47%; height: 300px;}

HTH,
Joe D.

4/6/2012 4:37:01 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Webstore Width help

Look for this in the theme.skin file of your skin:

<portal:InnerBodyPanel runat="server"
ExtraCssClasses="art-layout-cell layout-item-0"
... 

change ExtraCssClasses to an empty string like this:

ExtraCssClasses=""

Hopefully that will solve it, seems like I remember seeing this problem some weeks back and fixing it with that solution.

Joe

4/6/2012 4:50:51 PM
akrogers
Gravatar
Total Posts 12
View Posts

Re: Webstore Width help

Thanks Joe! Removing that from the theme.skin did the trick!

You must sign in to post in the forums. This thread is closed to new posts.