Featured Product Spacing/ Alignment Problem

[preserver]

There is no spacing between the fourth and fifth products in the home page featured products.     I'm using version 1.5.4.1

 

I am using the default theme, modified to a grid listing of products (wide left column with skinny right column.)  Also, I have increased the home_default image size to 140 from 124.    

 

I would ideally like to use 3 columns with larger images, maybe 235 pixels each, and have them line up with the right edge of the image slider (wide left column.)  I know the total width of the column is 770, but I don't know how to alter the spacing in between the featured products.  

 

I altered the image width in the modules/homefeatured/homefeatured.css, so I'm thinking that is where most of the alterations will need to go.  Here is the file, in case it sheds some light on things:

#featured-products_block_center li {

	margin-right:10px;

	padding:20px 0;

	width:140px;

	height:240px

}

#featured-products_block_center li.last_item_of_line  {margin-right:0;}

#featured-products_block_center .s_title_block,  #featured-products_block_center h5 {

	padding-top:5px;

	height:30px;

	font-size:12px;

	color:#222;

	padding-bottom: 0;

	font-weight:bold;

}



#featured-products_block_center .product_image {

	display:block;

	position:relative;

	overflow:hidden

}

#featured-products_block_center .product_image span.new {

	display: block;

	position: absolute;

	top: 15px;

	right:-30px;

	padding: 1px 4px;

	width: 101px;

	font-size:10px;

	color: #fff;

	text-align: center;

	text-transform: uppercase;

	-moz-transform: rotate(45deg);

	-webkit-transform: rotate(45deg);

	-o-transform:rotate(45deg);

	-ms-transform: rotate(45deg);

	background-color: #990000;

	transform: rotate(45deg);  /* Newer browsers */

}



#featured-products_block_center .product_desc {height:45px;}

#featured-products_block_center .product_desc,

#featured-products_block_center .product_desc a {

	color:#666

}

#featured-products_block_center .lnk_more {

	display:inline;

	padding-right:10px;

	font-weight:bold;

	font-size:10px;

	color:#0088cc;

	background:url(img/arrow_right_1.png) no-repeat 100% 3px;

}

#featured-products_block_center .price_container {

	margin-top:10px;

	padding:0;

}

#featured-products_block_center .price {

	font-weight:bold;

	font-size:14px;

	color:#990000

}

#featured-products_block_center li .ajax_add_to_cart_button {display:none;}

#featured-products_block_center li span.exclusive {display:none;}
 

Any help in the right direction would  much appreciated.  Thank you.

Edited March 10, 2014 by preserver (see edit history)

[dioniz]

It would be easier if we could see your page

[preserver]

I have it in maintenance mode still.  It hasn't gone live.  How can I work around this?

[dioniz]

can you put it out of maintenance mode so we can see it and then back to maintenance

[preserver]

Alright, here it is:  http://www.preservationcoins.com/en/

[vekia]

hello

it's related to tpl file

open homefeatured.tpl and change line:

{assign var='nbItemsPerLine' value=4} 

to:

{assign var='nbItemsPerLine' value=5}

i increased value param from 4 to 5 (5 products per row)

[dioniz]

Ok, in Featured products on the homepage you can set how many products you want to show.

You have probably set it to 8 which is default. That makes 2 rows of 4 products.

That's why you dont have spacing after fourth image.

If you would like 3 rows of 3 images set Define the number of products to be displayed to 9 and then play with image size and width and padding in #featured-products_block_center li

 

Hope this helps

[dioniz]

Yeah and i forgot about what Vekia said, sorry. and put it to 3 for 3 products in a row

[preserver]

It's strange.  I changed the number of items per line as Milos said, but it didn't seem to fix it.  

 

I believe I have forced compilation on.

 

I will try doing the 3 products per row alterations and see what happens.

Edited March 10, 2014 by preserver (see edit history)

[preserver]

Woops!  I was editing the number of items per row in modules/homefeatured/homefeatured.tpl, not in themes/default_grid/modules/homefeatured/homefeatured.tpl.  I edited the themes version, and it worked.  Should have remembered this from other postings I have read.  Thank you!

[epiceriecomptoir]

hello

it's related to tpl file

open homefeatured.tpl and change line:

{assign var='nbItemsPerLine' value=4} 

to:

{assign var='nbItemsPerLine' value=5}

i increased value param from 4 to 5 (5 products per row)

After many tries, I still have the 4th and 5th products, and 8th en 9th products attached without spacing.

Can you see any solution (see www.epiceriecomptoir.com/store) ?

Thanks

[epiceriecomptoir]

After many tries, I still have the 4th and 5th products, and 8th en 9th products attached without spacing.

Can you see any solution (see www.epiceriecomptoir.com/store) ?

Thanks

Whoops, there has been a change overnight !!! The featured products now appear 3 by 3 with very large spacing ... Can you tell me what's going on ? see www.epiceriecomptoir.com/store

 

I have done as Vekia said, changing the line from 4 to 5 in themes/default/modules/homefeatured.tpl :

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block clearfix">

<p class="title_block">{l s='Featured products' mod='homefeatured'}</p>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=250}

{assign var='nbItemsPerLine' value=5}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

<ul style="height:{$ulHeight}px;">

Edited April 1, 2014 by epiceriecomptoir (see edit history)