The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 05-10-2015, 06:10 PM
PPP's Avatar
PPP is offline
 
Join Date: Jul 2013
Posts: 6
Default

Thumbnail spacing in Grid view


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;
}

Last edited by PPP; 05-10-2015 at 10:14 PM.
  #2  
Old 05-14-2015, 09:32 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by PPP View Post
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.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #3  
Old 05-14-2015, 05:19 PM
PPP's Avatar
PPP PPP is offline
 
Join Date: Jul 2013
Posts: 6
Default

Thank you for your reply. Not only did all of your suggestions work, this is probably the best and clearest forum answer I have ever gotten anywhere! Store looks so much better this way. I did not realize the zoom effect started with the images scaled down. (I thought they looked a bit fuzzy) I changed it to (1.0) and zooms to (1.2) that way thumbnails won't cover the name of the product.

Thanks again!

Sig
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
spacing, thumbnails

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:26 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.