Return to previous page

How to reduce this gap between the two columns of products on mobile device

This topic has 4 replies, 3 voices, and was last updated 1 years, 3 months ago ago by Rose Tyler

lanxiaodj

Participant

August 23, 2023 at 17:19

How to reduce this gap between the two columns of the products on mobile device (https://prnt.sc/vquOXBdN70Dj). This is so unpretty and almost all the demos’ shop page (when 2 columns layout) look like this. I tried putting the following codes:

@media only screen and (max-width: 480px)
.products-grid .product {
width: 50%;
padding-left: 5px;
padding-right: 5px;
}

in the Additional CSS, but it doesn’t work. I really appreciate if you could spare me some functional codes. I’d like to share my administrative info if it’s necessary.

#365478 Copied Theme version: 9.1.13

3 Answers
Tony Rodriguez

Support staff

August 24, 2023 at 05:45
Hello, @lanxiaodj,

Thank you for choosing XStore as your WooCommerce WordPress theme.

In order to solve your issue, Please copy and paste the following CSS code to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache. The result should look like this: https://postimg.cc/tZn2KwM0
```
@media screen and (max-width: 767px) {
.products-loop .type-product {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
```
We trust this will be of assistance to you.

Best Regards,
Team 8Theme.
#365486 Copied
lanxiaodj

Participant

August 24, 2023 at 06:39

Works!!!!!!
Appreciate your assistance

#365489 Copied

Rose Tyler

Support staff

August 24, 2023 at 06:42

Hello, @lanxiaodj,

You’re welcome!

Best Regards,
Team 8Theme.

#365492 Copied
Tagged: improve mobile view, mobile optimization, reduce product column gap, responsive woocommerce design, woocommerce themes, wordpress customization
Viewing 4 results - 1 through 4 (of 4 total)