#1  
Old 10-12-2019, 07:16 PM
ASN's Avatar
ASN is offline
 
Join Date: Jun 2019
Posts: 1
Default

Mobile Shop Product Display


Hi there.

We would like to know if there is a way to change the number of row's are displayed in the shop page - for mobile only.

The "Medium" design option for products works really well for desktop and we do not want to change that - however, having this option then displays two columns of products on a mobile device, which causes our product text to be very cluttered and not very pretty really.

Is there a way to change mobile product list to display products in one column so there is more width to wrap the text?

Thanks.
  #2  
Old 10-13-2019, 12:03 AM
Stylesupplier's Avatar
Stylesupplier Stylesupplier is offline
Banned
 
Join Date: Feb 2013
Location: United States
Posts: 63
Default

I think Ecwid store are all adaptive, This may be a problem with your own website.
  #3  
Old 10-14-2019, 06:31 AM
Dexter K.'s Avatar
Dexter K. Dexter K. is offline
Ecwid Team
 
Join Date: Dec 2018
Posts: 22
Default

Hello there!

This is Dexter with the Ecwid team. Thanks for your question!

I've checked the website at https://www.allstarnutrition.co.za/shop/ and I've been able to see what you mean - the products are arranged into two columns and the product containers look too narrow.

Basically, Ecwid has an adaptive design, still, sometimes you may need some specific changes for your taste.

So, if you want the products go one per row, please, use this CSS code:

Quote:
/* Arrange products into one column */
.ec-size .ec-store .grid__products[data-cols="2"] .grid-product:nth-child(n+1) {width: 100% !important;}
/*END*/
Please, apply this code in Ecwid Dashboard > Design > Edit theme

Once done, the products will go one under another.

I hope it helps!

If you have any questions, please, ask and we'll be glad to assist!
The Following User Says Thank You to Dexter K. For This Useful Post:
Bill Watts (10-16-2019)
  #4  
Old 05-27-2020, 09:39 AM
LoyalWarhawk's Avatar
LoyalWarhawk LoyalWarhawk is offline
Junior Member
 
Join Date: May 2020
Posts: 1
Default

Quote:
Originally Posted by Dexter K. View Post
Hello there!

This is Dexter with the Ecwid team. Thanks for your question!

I've checked the website at https://www.allstarnutrition.co.za/shop/WalgreensListens and I've been able to see what you mean - the products are arranged into two columns and the product containers look too narrow.

Basically, Ecwid has an adaptive design, still, sometimes you may need some specific changes for your taste.

So, if you want the products go one per row, please, use this CSS code:



Please, apply this code in Ecwid Dashboard > Design > Edit theme

Once done, the products will go one under another.

I hope it helps!

If you have any questions, please, ask and we'll be glad to assist!

Thanks, very impressive. Really I appreciate you to continue your work.

Last edited by LoyalWarhawk; 05-28-2020 at 05:02 AM.
 

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