Empty space in product list on tablet - by maccandy

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

  • Avatar: maccandy
    maccandy
    Participant
    April 3, 2020 at 12:32

    Hello,

    on tablets (ipads) I have empty space in the product lists. Depending if I use the tablet in portrait or landscape mode, the empty space changes the position. The empty space (white product grids) is sometimes 1, sometimes 2, 3 or 4 product grid large, depending on the chosen order of the list.

    Thx
    maccandy

    Please, contact administrator
    for this information.
    7 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 3, 2020 at 13:18

    Hello,

    Add the next Custom CSS code:

    .shop-full-width .products-grid.row-count-4 .product:nth-child(4n+1) {
        clear: both !important;
    }
    @media only screen and (max-width: 979px) and (min-width: 768px) {
        .shop-full-width .products-grid.row-count-4 .product:nth-child(2n+1) {
            clear: both;
        }
    }

    Regards

    Avatar: maccandy
    maccandy
    Participant
    April 3, 2020 at 13:49

    Works perfect. Thx!

    Kind regards
    maccandy

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 3, 2020 at 13:57

    You’re welcome!
    Have a nice day.

    Regards

    Avatar: maccandy
    maccandy
    Participant
    April 3, 2020 at 16:54

    Hi,

    now I have the problem with the white space on mobile, too. There I just inserted the other code you provided me in my second ticket of today to get 2 columns in mobile lists instead of one. Could you please give me also the code for the fix for mobile phones with 2 colums.
    corrersponding ticket: https://www.8theme.com/topic/mobile-2-columns-in-product-list/

    Thx and kind regards
    maccandy

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 4, 2020 at 08:14

    Hello,

    @media only screen and (max-width: 480px) {
        .shop-full-width .products-grid.row-count-4 .product:nth-child(2n+1) {
            clear: both !important;
        }
    }

    Regards

    Avatar: maccandy
    maccandy
    Participant
    April 4, 2020 at 08:57

    Hello,

    works now perfect. Thx a lot for your good support and the very fast response time.

    Kind regards
    maccandy

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 4, 2020 at 09:00

    Hello,

    You’re welcome!

    Regards

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.