Featured categories are displaying as a column not a row.

Resolved techstacy
(@techstacy)

4 years, 7 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)

Senff – a11n
(@senff)

4 years, 7 months ago
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 4 years, 7 months ago by Senff - a11n.
Thread Starter techstacy
(@techstacy)

4 years, 6 months ago

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?

Niall a11n
(@wpniall)

4 years, 1 month ago

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)

4 years, 1 month ago

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

Niall a11n
(@wpniall)

4 years, 1 month ago

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