Featured categories are displaying as a column not a row.

  • Resolved techstacy

    (@techstacy)


    3 years, 12 months ago

    I’m attempting to use a text widget in the “below header” position to display 4 featured categories at the top of the Shop page using the shortcode:
    [product_categories ids="422,181,170,147" columns="4" orderby="include"]

    When the page renders the categories are shown vertically.

    How do I get the categories to display as a row and not a column?

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hey @techstacy

    The reason why it’s doing that is because of this code (either from a plugin or something you’ve added yourself):

    .wc-block-grid__products .wc-block-grid__product, .wc-block-grid__products li.product, ul.products .wc-block-grid__product, ul.products li.product {
    clear: none;
    width: 100%;
    float: left;
    font-size: .875em;
}

    If you know where this code is coming from, then you can either remove the “width: 100%” from there, or you can add some additional code:

    @media screen and (min-width: 768px) {
  ul.products li.product {
   width: 23%;
   margin-right: 2%;
  }
}
    • This reply was modified 3 years, 12 months ago by Senff.
    Thread Starter techstacy

    (@techstacy)

    Thank You for your help with this! Your CSS code got the page looking great.

    As for the source of the CSS: .wc-block-grid__products width: 100%;, I verified there was no custom CSS and disabled all plugins except for woo and it still produced a vertical column. Downloaded the theme and ran text search for the offending CSS but no luck. Any tips on hunting down the source?

    Hi @techstacy,

    I’m sorry we missed your last post. Have you been able to resolve this issue?

    If not, would you mind sharing a screenshot and the URL of the where you see the vertical columns? I had a look at https://www.johndavidmagic.com/shop-test/ and do not see any vertical columns.

    Thread Starter techstacy

    (@techstacy)

    This issue was resolved with CSS from Senff – a11n (@senff). Thanks for stopping back by.

    You’re welcome! Glad to hear it, and thanks for letting us know!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Featured categories are displaying as a column not a row.’ is closed to new replies.