Single column product listing on mobile and desktop

[patrickmarmalade]

Hello,

I am trying to set up a product listing page that is 1 column on mobile

and 2 columns on desktop.

Issues:

• (wpbakery element: product/ producsts) Minimum column dropdown is allowed to be displayed is 2.
• (wpbakery element: product) When trying to add 1 product on a row, on mobile it looks like it does not use the whole width of the device (the product seems to only use less than 50% of the screen width)

Is there a css change that can make single column possible, and make the products look full width ?

 

[Harry]

Hi,

Please setup 2 products a row on desktop and use below code to set 1 column of product on mobile

Add below code to JanStudio > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 736px) {
.products .jas-col-xs-12 {
	flex-basis: 100% !important;
	max-width: 100% !important;
}}

Best regards
Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[patrickmarmalade]

Thanks I’ll test this tonight!

[patrickmarmalade]

This reply has been marked as private.

[Harry]

Hi,

This is custom page, you have to edit element of products http://take.ms/zuvgc

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[patrickmarmalade]

Thanks for the screenshot however it does not resolve my issue.

The screenshot I sent shows that the product (and not “products”) element is being squeezed inside the column

This is the layout I need to use:

This is the result:

 

>>The single ‘product’ needs to be scaled up to use 100% of the column width. I’m not able to target the product element to get the effect of using 100% width /w vertical scale to aspect ratio in my css attempts..

 

 

 

[Harry]

Hi,

Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

.jas-col-md-0 {
	flex-basis: 100% !important;
	max-width: 100%  !important;
	-webkit-flex-basis: 100%  !important;
	-ms-flex-preferred-size: 100%  !important;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[patrickmarmalade]

Awesome!! that worked!!

Thanks for the help!

[Author]

Posts