• 

  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)