Return to previous page

Prodcut Lists on Mobile Platforms - by ajgamecave

This topic has 6 replies, 2 voices, and was last updated 6 years, 2 months ago ago by Rose Tyler

ajgamecave

Participant

August 28, 2018 at 15:24

Hello,

We are experiencing and odd occurrence when we view our page on mobile platforms. When our products are listed there are often blank spaces. Please see the attached screen shot.

We have responsive selected, no custom CSS for product archives. I am hoping for some guidance to avoid or mitigate this.

Thank you!

Please, contact administrator
for this information.

#198574 Copied

5 Answers
Rose Tyler

Support staff

August 29, 2018 at 07:35
Hello,

Please try to add this code in Theme Options > Custom css or in style.css file of your child theme:
```
@media only screen and (max-width: 1200px) and (min-width: 778px){ 
   .products-grid.row-count-5 .product:nth-child(3n+1) {
        clear: both !important;
    }
}
```
Regards
#198601 Copied
ajgamecave

Participant

August 29, 2018 at 18:05

The problem only seems to remain when viewed on a tablet with portrait orientation. Could this be due to the Default value being taken from the width attribute? (screen shot of WPB Column settings: https://screenshots.firefox.com/x3J3YK37iKUeJRjW/ajgamecave.com)

It looks great on all of our other tested platforms.

#198658 Copied
Rose Tyler

Support staff

August 30, 2018 at 07:50
Hello,

Please change the previous code to:
```
@media only screen and (max-width: 1200px) and (min-width: 768px){ 
   .products-grid.row-count-5 .product:nth-child(3n+1) {
        clear: both !important;
    }
}
```
Regards
#198669 Copied
ajgamecave

Participant

August 31, 2018 at 00:07

Brilliant!

Thank you, it looks lovely on all platforms.

Best Regards,
Joe

#198710 Copied

Rose Tyler

Support staff

August 31, 2018 at 07:06

You’re welcome!

Regards

#198714 Copied
Viewing 6 results - 1 through 6 (of 6 total)