Spacing between products on shop page

[bestfitbybrazil]

My products are too far apart horizontally on shop pages.  How can i decrease this.?

[bestfitbybrazil]

this is only issue on mobile view by the way.

[Harry]

Hi,

I see you added code

@media only screen and (max-width: 768px) {	
.product {
	margin-top: 90px;
}}

Please find the code and reduce number

Kind regards

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

[bestfitbybrazil]

code only works for the very top not space in between products horizontally.

[Harry]

If you want add space on vert top please change code to

@media only screen and (max-width: 768px) {
.products.jas-row  {
	margin-top: 90px;
}}

Regards

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

[bestfitbybrazil]

not top. just the space in rows between all products Horizontally top to bottom

[bestfitbybrazil]

[Harry]

Please remove the code you add

.product {
	margin-top: 90px;
}

Regards

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

[bestfitbybrazil]

this code just removes space only from very top of products.  i need it remove space from rows between products here:

[Harry]

Please remove code, it will apply for all, it now this affect to js so it add position to other product. Please remove, save and check again. Don’t use browser check

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

[bestfitbybrazil]

ok that worked thx!

[bestfitbybrazil]

So i put this code in css theme to cover mobile and desktop. Not working on either now.

 

/* adjust space between product rows on mobile */
@media only screen and (max-width: 768px) {
.product {
margin-top: 45px;
}
}

 

and i tried this not working

@media only screen and (max-width: 768px) {
.products.jas-row {
margin-top: 90px;
}}

/* adjust space between product rows on desk*/
@media only screen and (min-width: 769px) {
.product {
margin-top: 40px;
}
}

[Harry]

Hi,

The code

@media only screen and (max-width: 768px) {
.products.jas-row {
margin-top: 90px;
}}

it work for first row of product on mobile.

Kind regards

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

[Author]

Posts