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 04-28-2014, 07:19 AM
Don Johnston:2970182@deleted's Avatar
Don Johnston:2970182@deleted is offline
Junior Member
 
Join Date: Feb 2014
Posts: 4
Default


I tried custom CSS changes to vary the size of the ECWID site manually embedded into Wix via a HTML widget and the changes are not working. The site is http://www.hellosubs.com and we are seeking to "tighten" up the product browser to reduce space between products both horizontally and vertically. We are a paid customer.

I tried these Custom CSS overide code and saved/activated the custom CSS but changes will not take effect. Tried in multiple browsers and cleared cache still no go.

Can you help?

I used these instructions from your Help site:
http://www.hellosubs.com
How to reduce space between products in Grid view
Page history last edited by Maya 2 years, 1 month ago
Vertical and horizontal spaces between products can be easily changed by adding some CSS styles in your CSS theme:

In order to change space between products you should use following code:

td.ecwid-productBrowser-productsGrid-cell { padding: 0px 2px; /*change 2px value to make space between products bigger or smaller*/ }


In order to make spaces between products lines smaller you should add this code in your CSS theme:

td.ecwid-productBrowser-productsGrid-cellSpace { height: 5px; }

WOW PAID CUSTOMER and no response yet? This question isnt even about something rare, it's in reference to the ECWID forms own suggestions that doesnt even work! I'm not sure ECWID will be my client's next shop cart choice......a few use it now but I think this will be the last!

Last edited by Corwin; 04-29-2014 at 04:32 AM.
  #2  
Old 04-29-2014, 09:26 AM
Thematizr.com's Avatar
Thematizr.com Thematizr.com is offline
Webpartner
 
Join Date: Jul 2012
Posts: 379
Default

Are you sure you have actually applied these changes? There seems to be no such rules in your CSS. Anyway. The best thing I can suggest here is to enable the adaptive design in your admin panel, Settings / General / Migrations, then increase the size of thumbnails in Settings / Design / Thumbnail Sizes. This alone makes any store layout much more pleasant and attractive.
__________________
Check out our latest ready-made designs for Ecwid:

Termion | Helata | Martina

Get 1 year of access to all our current and future themes.

Follow us on Twitter: @thematizr
  #3  
Old 04-30-2014, 01:12 AM
Don Johnston:2970182@deleted's Avatar
Don Johnston:2970182@deleted Don Johnston:2970182@deleted is offline
Junior Member
 
Join Date: Feb 2014
Posts: 4
Default

Why are none of these changes taking effect? I have set the design to be responsive and that does not work. I have removed the custom CSS because it didnt work - thats why you dont see it.

I now have to get my custom developer to pay to resolve this because ECWID's help file and features explaining how to implement the responsive design (as you mention), along with the category products listing width and the thumbnail sizes using custom CSS do not affect the categories or product pages sizes.

I dont understand?

Heres the HTML code I use in WiX:

<div>
<script type="text/javascript" src="http://app.ecwid.com/script.js?2970182" charset="utf-8"></script>
<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3 ,3) list(10) table(20)","categoryView=grid","searchView=list"," style=","responsive=yes"); </script>
<noscript>Your browser does not support JavaScript. Please proceed to <a href="https://app.ecwid.com/jsp/2970182/catalog">HTML version of this store</a></noscript>
</div>
  #4  
Old 04-30-2014, 12:24 PM
Thematizr.com's Avatar
Thematizr.com Thematizr.com is offline
Webpartner
 
Join Date: Jul 2012
Posts: 379
Default

Maybe you were editing the settings for another account? Make sure that the number you see in the right bottom of your admin panel is 2970182.
__________________
Check out our latest ready-made designs for Ecwid:

Termion | Helata | Martina

Get 1 year of access to all our current and future themes.

Follow us on Twitter: @thematizr
  #5  
Old 04-30-2014, 02:21 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Don Johnston View Post
Why are none of these changes taking effect? I have set the design to be responsive and that does not work. I have removed the custom CSS because it didnt work - thats why you dont see it.

I now have to get my custom developer to pay to resolve this because ECWID's help file and features explaining how to implement the responsive design (as you mention), along with the category products listing width and the thumbnail sizes using custom CSS do not affect the categories or product pages sizes.

I dont understand?

Heres the HTML code I use in WiX:

<div>
<script type="text/javascript" src="http://app.ecwid.com/script.js?2970182" charset="utf-8"></script>
<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3 ,3) list(10) table(20)","categoryView=grid","searchView=list"," style=","responsive=yes"); </script>
<noscript>Your browser does not support JavaScript. Please proceed to <a href="https://app.ecwid.com/jsp/2970182/catalog">HTML version of this store</a></noscript>
</div>
Hello,

I've checked your store and as far as I can see the codes reducing the space between category icons works perfectly fine. As for the code reducing the space between the products in grid view, you do not have them added to your custom CSS theme at the moment. As you mentioned in your previous post, you should use these codes:

Code:
td.ecwid-productBrowser-productsGrid-cell {
padding: 0px 2px; /*change 2px value to make space between products bigger or smaller*/ 
}

/*Use this code to make spaces between products lines smaller*/
td.ecwid-productBrowser-productsGrid-cellSpace {
height: 5px;
}
Concerning the responsiveness of your store, Ecwid itself is adaptive, we made it very simple to turn on this option for our clients: with one click to enable responsive layout in Ecwid control panel>System Settings>General>Migrations. It is enabled in your store right now. You can check this link, this is the responsive version of your Ecwid store: https://hellosubs.ecwid.com/m

Yet Ecwid is an embeddable cart, and is used as a component of your web-site. It's inserted into certain container with fixed size and occupies all the space allotted for it. When your site doesn't have responsive layout, opening on a mobile will not change it anyhow, i.e. it will have the same fixed width. Hence Ecwid will remain displaying within this fixed unchanged container, and therefore it won't be resized either.
When the site has responsive layout, it's shrinked on the fly adapting to the device screen width, and so resizing the container with Ecwid which responds automatically as well and adapts accordingly.

Thus enabling Ecwid responsive option wouldn't be enough - you should make your site design adaptive as well. It can be done by simply choosing another skin, if you're using CMS or sitebuilder (not all skins/templates are adaptive by default), or you may need additional redesigning.
__________________
Liza P.
Customer Care
Ecwid Help Portal
 
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

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 10:10 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.