One column layout on Mobile Product Listing

[seventalents]

Is it possible One Column Layout on mobile versione of Product Listing?

[Harry]

Hi,

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

@media only screen and (max-width: 736px) {
.jas-col-xs-6.jas-col-md-6, .jas-masonry .jas-col-xs-6.jas-col-md-6 {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}}

@media only screen and (max-width: 480px) {
.products .jas-col-xs-6:first-child, .products .jas-col-xs-6:nth-child(2n+1), .products.jas-masonry .jas-col-xs-6:nth-child(2n) {
	padding-right: 1rem;
}
.products .jas-col-xs-6:nth-child(2n), .products.jas-masonry .jas-col-xs-6:first-child, .products.jas-masonry .jas-col-xs-6:nth-child(2n+1) {
	padding-left: 1rem;
}}

Kindd regards

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

[seventalents]

I have added the code to Claue > Theme Option > General Layout > Custom CSS, but it doesn’t work.

[Harry]

The account you sent can’t access dashboard I can’t see your site, please check and send me again.

Thanks

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

[seventalents]

try now

[Harry]

Hi,

Please change code to

@media only screen and (max-width: 736px) {
.jas-col-xs-6.jas-col-md-4, .jas-masonry .jas-col-xs-6.jas-col-md-4,
.jas-col-xs-6.jas-col-md-6, .jas-masonry .jas-col-xs-6.jas-col-md-6 {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}}

@media only screen and (max-width: 480px) {
.products .jas-col-xs-6:first-child, .products .jas-col-xs-6:nth-child(2n+1), .products.jas-masonry .jas-col-xs-6:nth-child(2n) {
	padding-right: 1rem;
}
.products .jas-col-xs-6:nth-child(2n), .products.jas-masonry .jas-col-xs-6:first-child, .products.jas-masonry .jas-col-xs-6:nth-child(2n+1) {
	padding-left: 1rem;
}}

Kind regards

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

[seventalents]

Thanks Harry, now it works!!

Besides could you tell me how increase the size of the highlighted attached select?

The phrase “Ordinamento … (order by…)” is trunked on mobile version (see screenshot)

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add more code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 384px) {
.woocommerce-ordering select {
	width: 100%;
}}

Kind regards

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

[seventalents]

Perfect! Thanks!

[Author]

Posts