Quote:
Originally Posted by PPP
I know this has com up several times in different threads but none of the solutions listed work for me. I want to be able to control the spacing between thumbnails in grid view. I have set it up so there are 3 thumbnails per row and 40 rows.
I have tried all the codes I can find regarding this matter listed here below, individually and together but no or very little change in spacing between the thumbnails.
I also wanted to move the product name closer to the thumbnail but that did not work either.
I have made several other changes that worked great but nothing works for me when it comes to spacing. I am using Wordpress and Vantage theme.
My site is temporarily parked here: http://www.barelandscapes.com/wordpr...=0&sort=normal
Here are the codes I have tried so far. Please help.
/*This code removes spacing between thumbnail productsr*/
td.ecwid-productBrowser-productsGrid-cellSpace {
height: 0px; /* set height of space between products’ rows*/
}
td.ecwid-productBrowser-productsGrid-cell {
padding: 0px 5px;
}
div.ecwid-productBrowser-productsGrid-productBottomFragment {
padding-top: 5px;
}
td.ecwid-productBrowser-productsGrid-cell {
padding: 0px;
}
div.ecwid-productBrowser-category {
padding-top: 0px
}
table.ecwid-productBrowser-subcategories-mainTable {
margin: 0px auto 0; /*change 20px in order to reduce top gap*/
}
td.ecwid-productBrowser-subcategories-cellSpace {
display: none;
} |
Hi,
Thank you for contacting us.
I checked your website here and I see that you wish to reduce the space between the product images in your category pages, correct?
Here's how it looks right now:
http://take.ms/g9Xhx
In your store you are using custom CSS to create a zoom effect, this is the code:
Code:
/*zoom on thumbnail images*/
html#ecwid_html body#ecwid_body td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
html#ecwid_html body#ecwid_body td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 00px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 00px gray; /*Mozilla shadow version*/
}
As you can see in the top section of the code, it makes your product thumbnails to scale down a bit to the 0.8 of their actual size, so when you are not hovering over the product - the image appears smaller than it is actual size.
Then when you hover over the image, it is scaled to 1.1 of it's actual size, so you jump from 0.8 in size to 1.1 which creates a good zoom effect.
Well, the thing is that when you need to reduce the space between products, the first thing that needs to be done is to make the product thumbnails to display at the actual size from the beginning, so to change the 0.8 in the code to 1.0:
Code:
/*zoom on thumbnail images*/
td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 00px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 00px gray; /*Mozilla shadow version*/
}
So as a result, the spacing in your product grid will decrease and it will look like this:
http://take.ms/yBUCM
Then, in order to decrease it even further, we can increase the width of the image itself using this code:
Code:
.ecwid-productBrowser-productsGrid-cell img {
width: 320px !important;
}
As you can see, it will increase the size of product images:
http://take.ms/q7JBt however the space will be reduced this way. Feel free to use it, in case if you are only comfortable with this option.
If you wish to move the product name closer to the image on the category page, you can use this code:
Code:
div.ecwid-productBrowser-productsGrid-productBottomFragment {
padding-top: 0px !important;
}
However please mind that when you have zoom enabled, the image will overlap the product name:
http://take.ms/WLOdF so I'd recommend you to use it if you wish that this design fits your vision for your store.
Also I'd recommend that you create a new image for the 'From the earth' product, so it looks like other products on your page:
http://take.ms/YuOh6
Thank you.
05-10-2015, 06:10 PM
Ecwid API and App Market Team
Linear Mode
