Return to previous page

Shop page on Mobile version - by Deepak Sahu

This topic has 9 replies, 3 voices, and was last updated 5 years, 3 months ago ago by Deepak Sahu

Deepak Sahu

Participant

August 17, 2020 at 20:53

Check this out, https://prnt.sc/u16xv6
There is a lot of space aside products which I do not want. I want it like this https://prnt.sc/u16zu5.

No space at all, with a light line displaying border. I wish to remove the size swatch from the shop page on the mobile device and also to decrease the size of swatches on a mobile shop page.

Please, contact administrator
for this information.

#248294 Copied Theme version: 6.8.3 WooCommerce version: 4.3.1

8 Answers
John Holden

Participant

August 18, 2020 at 05:21
Hi,

– Add custom class for Row, for e.g: https://prnt.sc/u1d2y8

– Use below code

@media only screen and (max-width: 480px){ .no-spacing-row .products-loop .product { padding: 0; } }

Regards,
Hung PD
#248311 Copied
Deepak Sahu

Participant

August 18, 2020 at 07:39

1. Is there any way to add dividers on the woocommerce pages? (Somewhat like this: https://prnt.sc/u1feyk)

2. Is there any way to remove only the size swatch from mobile devices only?

3. The screenshot you provided, I am done with that, but that does not change anything, neither a change is required there. I tried pasting the code provided by you on the CSS class of shop page, the issue is not solved.

…………..This is the home page row
(https://drive.google.com/file/d/1u-Rq3l-mDPJE7EbyptzWGo30Gk71EgMt/view?usp=sharing)

…………This is the shop page, see the spacing difference
(https://drive.google.com/file/d/1bfJVh52d1YUD5xhN168upy5bM_B08Bt6/view?usp=sharing)

I have tried to be very clear here, hope you understand.

#248328 Copied
Olga Barlow

Participant

August 18, 2020 at 16:24
Hello,

1) You can implement this by custom CSS only, for example

.content-product { border: 1px solid #efecec; }

2) Nope.
3) Try to replace by the follwing

@media only screen and (max-width: 480px){ .product { padding:0!important; } }

Don’t forget to clear plugin cache and CDN cache.

Regards
#248383 Copied
Deepak Sahu

Participant

August 18, 2020 at 19:13

The lines are displaying now but suddenly the box-shadow doesn’t come up.

The mobile padding issue yet the same. Can you do this part? I have provided you with the credentials. Thanks in advance.

#248432 Copied

Olga Barlow

Participant

August 19, 2020 at 12:01

Hello,

1) I see the shadow http://prntscr.com/u25x63
2) There are no paddings between products on moile http://prntscr.com/u25wqd

Regards

#248498 Copied

Deepak Sahu

Participant

August 19, 2020 at 12:39

1) please visit the shop page on mobile.
https://prnt.sc/u26m1c
https://prnt.sc/u26mdk

#248517 Copied

Olga Barlow

Participant

August 19, 2020 at 15:59

Hello,

I see. Check now, please.

Regards

#248554 Copied

Deepak Sahu

Participant

August 20, 2020 at 16:18

Yeah done. Thanks Olga.

#248720 Copied
Viewing 9 results - 1 through 9 (of 9 total)