Home Page Products Displaying in a Single Column and not in a Grid Display
Hello,
For some reason our home page product images only display in a left aligned single column. Instead of displaying three columns across and four rows down, it only displays one row of nine images down and the column is aligned to the left leaving the second and third row blank. Could this be controlled in the stylesheet.php page, administration controler, or another .php page? Most of all my editing has been in the stylesheet.php page, but I have not been able to find anything that control the column / row layout.
Thanks.
Re: Home Page Products Displaying in a Single Column and not in a Grid Display
Just as you can not find the cause, without seeing your site, neither can we.
Post a link to it
Re: Home Page Products Displaying in a Single Column and not in a Grid Display
This kind of effect can be caused by eliminating a "float: left;" in your stylesheet, but we can't be sure without seeing your site.
Re: Home Page Products Displaying in a Single Column and not in a Grid Display
Check your setting in your
admin > config > images > Product Info - Number of Additional Images per Row > is set to "1"
Re: Home Page Products Displaying in a Single Column and not in a Grid Display
Hello, thanks for the replies. My site is not live, it's on a seperat internal server so at the moment I don't have an URL link. Athough I could post the code to a few pages I mentioned. I am new to the forumn
Posted via Mobile Device
Re: Home Page Products Displaying in a Single Column and not in a Grid Display
Here is my Stylesheet.css code
/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2007 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
*/
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color:white; /*HOME PAGE TEXT COLOR*/
background-color: #e5edf5;
/*background-color: black; UNREM WHEN WE ARE READY FOR BLACK BACKGROUND SEE #mainWrapper ALSO*/
}
a img {border: none; }
a:link, #navEZPagesTOC ul li a {
color: #FFCC00;
text-decoration: none;
}
a:visited {
color: #E707F5;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
/*color: #FF0000;*/
color: #51F551; /*Link Roll Over Color */
}
a:active {
color: #0000FF;
}
h1 {
font-size: 1.5em;
color: #9a9a9a;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}
.biggerText {
font-size: 1.2em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}
/* Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {
height: 1%;
}
*/
CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}
FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}
TEXTAREA {
margin: auto;
display: block;
width: 95%;
}
input:focus, select:focus, textarea:focus {
background: #F9FAA4; /*field text box background color*/
}
FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid grey; /*checkout section border color*/
}
LEGEND {
font-weight: bold;
padding: 0.3em;
color: orange; /*checkout section heading text*/
}
LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}
LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left; /*logo*/
}
#logo{
padding: 0 0 1em 2em;
}
LABEL.inputLabel {
width: 9em;
float: left;
}
LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 11em;
float: left;
}
#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}
P, ADDRESS {
padding: 0.5em;
}
ADDRESS {
font-style: normal;
}
.clearBoth {
clear: both;
}
HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}
/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #9a9a9a;
}
.messageStackWarning, .messageStackError {
background-color: red;
color: white;
}
.messageStackSuccess {
background-color: #99FF99; /*mint green*/
color: black;
}
.messageStackCaution {
background-color: #FFFF66; /*light yellow*/
color: black;
}
/*wrappers - page or section containers*/
#mainWrapper {
/*Main page */
background-image: url(../images/zebra-background.jpg);
/*background-color: black; */
text-align: left;
/*width: 750px;*/
width: 100%; /* We want it to fit entire width and shrink to fit */
vertical-align: top;
border: 1px solid #9a9a9a;
}
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}
#logoWrapper{
/*background-image: url(../images/tv_lines_background.jpg);*/
/*background-repeat: repeat-x;*/
/*background-color: #000000;*/
height:100px;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}
#tagline {
color: green; /*2-18-09*/
font-size: 2em;
/*text-align : center;*/
margin-left: 15.5em;
vertical-align: middle;
}
#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}
.wrapperAttribsOptions {
margin: 0.3em 0em;
}
/*navigation*/
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
/*background-color: #abbbd3;*/
/*background-color: white;*/
background-image: url(../images/zebra-background.jpg);
/*background-image: url(../images/topper_expansion_x30.png);*/
/*padding: 0.5em 0.2em;*/
font-weight: bold;
/*color: #E245F9;*/
color: white;
height: 1%;
}
#navCatTabsWrapper {
/*background-color: #ffffff; Original */
background-color: black; /*top text links*/
color: #9a9a9a;
background-image:none;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
/*color: #ffffff;*/
color:orange;
white-space: nowrap;
}
#navCatTabs ul li a {
color: #9a9a9a;
}
#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}
#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}
#navEZPagesTOC ul li {
white-space: nowrap;
}
#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
#navMainSearch {
float: right;
position:relative;
top:3px;
}
#navBreadCrumb {
padding: 0.5em 0.5em;
/*background-color: grey; /* Bread crumb area background color */
background-image: url(../images/zebra-background.jpg);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
color: #orange; /* Text Color */
}
#navBreadCrumb a{
color: #9a9a9a;
}
#navBreadCrumb a:hover{
color: #00CC33; /*Link Roll Over Color GREEN*/
}
#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/topper_expansion.png);
background-position: 10% 80%;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}
#navEZPagesTop a:hover{
color: #A1A0A0;
}
#navColumnOne, #navColumnTwo {
background-color: transparent;
}
/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 0.5em;
}
.alert {
color: red;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}
/*Shopping Cart Display*/
.buttonRow{
float:right;
}
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid white;
padding: 1em;
}
.tableHeading TH {
border-bottom: 1px solid #9a9a9a; /*dark grey*/
}
.tableHeading, #cartSubTotal {
background-color: #e9e9e9; /*grey*/
}
#cartSubTotal {
border-top: 1px solid #cccccc; /*grey*/
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
color: black;
}
.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}
#cartProdTitle {
color: blue;
}
.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}
#scUpdateQuantity {
width: 2em;
}
.cartQuantity {
width: 4.7em;
}
.cartNewItem {
color: #green;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartOldItem {
color: yellow; /*shopping cart side box display*/
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartBoxTotal {
text-align: right;
font-weight: bold;
}
.cartRemoveItemDisplay {
width: 3.5em;
}
.cartAttribsList {
margin-left: 1em;
}
#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #E4FEf5;
border: 1px solid #green;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: red;
}
.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}
#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}
#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}
.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}
.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}
.amount {
width: 5.5em;
}
/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}
.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}
/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}
.attributesComments {}
/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}
.centerBoxWrapper {
/*border: 1px solid #9a9a9a;*/
color: orange;
height: 1%;
margin: 1.1em 0;
}
h2.centerBoxHeading {
background-color: black;
font-size: 1.3em;
color: black;
background-image: url(../images/topper_expansion.png);
/*background-position: bottom;*/
background-position: center;
background-repeat: repeat-x;
}
/*
h2.centerBoxHeading span {
background-image: url(../images/topper_expansion_right_corn.png);
background-position: top right;
background-repeat: no-repeat;
display: block;
}
h2.centerBoxHeading span span {
background-image: url(../images/topper_expansion_right_corn.png) ;
background-position: bottom right;
background-repeat: no-repeat;
}
h2.centerBoxHeading span span span {
background-image: url(../images/topper_expansion_left_corn.png);
background-position: bottom left;
background-repeat: no-repeat;
}
h2.centerBoxHeading span span span span {
background-image: url(../images/topper_expansion_left_corn.png);
background-position: top left;
background-repeat: no-repeat;
padding: 0.5em;
}
*/
/*sideboxes*/
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
/*color: #ffffff; ORIGINAL */
color: #ac935d;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
/*color: #ffffff; ORIGINAL */
color: #ac935d;
}
/* Original
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}
*/
.leftBoxHeading, .rightBoxHeading {
margin: 0em;
/*background-color: #abbbd3;*/
background-image: url(../images/topper_blank.png);
padding: 0.5em 0.2em;
}
.centerBoxHeading{
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/topper_expansion_x30.png);
padding: 0.5em 0.2em;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
/*border: 1px solid #9a9a9a;*/
/*border-bottom: 5px solid #336633;*/
border-bottom: 5px solid black;
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #494A49; /*righ and left side list boxes*/
padding: 0.4em;
}
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
/*color: #FFFF33; Original*/
color: yellow;
text-decoration: none;
}
.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #ac935d; /* Clickable Box headings */
}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
/*color: black;*//* Original */
color: oragne; /*cart display header text and search page description text*/
}
.cartTotalsDisplay{
color: orange;
font-size: 12pt;
}
#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}
#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}
#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}
#bannerboxHeading {
background-color: #0000CC;
}
#upProductsHeading {
text-align: left;
}
#upDateHeading {
text-align: right;
}
/* main categories box parent and child categories */
A.category-top, A.category-top:visited {
color: orange;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: yellow;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #3ED93E; /*bright green*/
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
/* end categories box links */
/*misc*/
.back {
float: left;
}
.forward, #shoppingCartDefault #PPECbutton {
float: right;
}
.bold {
font-weight: bold;
}
.rowOdd {
background-color: #E8E8E8;
color: black;
height: 1.5em;
vertical-align: top;
}
.rowEven {
background-color: #F0F0F0;
color: black;
height: 1.5em;
vertical-align: top;
}
.hiddenField {
display: none;
}
.visibleField {
display: inline;
}
CAPTION {
/*display: none;*/
}
#myAccountGen li, #myAccountNotify li {
margin: 0;
}
.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}
.accountQuantityDisplay {
width: 10%;
vertical-align: top
}
TR.tableHeading {
background-color: #cacaca;
height: 2em;
}
.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/topper_expansion_x30.png);
height: 2em;
color: green;
}
/*force link text visible color on topper_expansion_x30*/
a.productListing-heading, .productListing-heading{
color: green;
}
.productListing-heading a:link{
color: #d407d6
}
/*topper_expansion_x30 with link, hover color*/
.productListing-heading a:hover {
color: yellow;
}
#siteMapList {
width: 90%;
float: right;
}
.ratingRow {
margin: 1em 0em 1.5em 0em;
}
LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: black;
color: black;
}
.information {padding: 10px 3px; line-height: 150%;}
#shoppingcartBody #shippingEstimatorContent {
clear: both;
}
.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}
/*center body heading title*/
#indexDefaultHeading {
color: white;
/*display: none;*/ /*will hide heading text*/
margin: 0em 0em 1em 0em;
font-family: Arial;
font-weight: bold;
font-size: 14pt;
}
.btn {
/*background: url(/var/www/zencart/includes/templates/template_default/buttons/english/button_search.png) no-repeat;*/
cursor: pointer;
width: 200px;
height: 100px;
border: none;
}
h2#productPrices {
color: red;
}
.productDescription #productGeneral{
color: red;
}
/*end of file*/
Re: Home Page Products Displaying in a Single Column and not in a Grid Display
Found the error, below is the code with the error:
SPAN.category-subs-selected {
font-weight: bold;
/* end categories box links */
/*misc*/
.back {
float: left;
}
there was a missing } after "font-weight: bold;" which caused all products to display and align to the left in one column.
:oops: