Support » Theme: Twenty Nineteen » Star rating upsets line of thumbnails

  • Resolved David Bennett

    (@bennettskaya)


    If one or more, but not all products in the grid have a star rating, the stars push the ‘Add to cart’ down the page and upset the grid horizontally.

    CSS to stop this happening?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What do you want to happen instead?

    Solution 1.
    If there are stars on any products in a line of thumbnails , then push all ‘add to cart’ buttons on that line down to maintain a straight line across the page.

    Solution 2.
    Do not display stars on catalog pages, only on single product pages.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the “Additional CSS” section of the dashboard add this:

    
    @media screen and (min-width: 769px) {
        .woocommerce ul.products, .woocommerce-page ul.products {
            display: flex;
        }
    
        .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
            display: flex;
            flex-direction: column;
            margin-bottom: 0;
            justify-content: space-between;
        }
    }
    

    https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That solution won’t work on mobile but it’s a quick win

    That works, thank you. And as you say – not on mobile.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Star rating upsets line of thumbnails’ is closed to new replies.