Custom woocommerce archive css

[avanaa]

Hi there,
I figured out how to customize my woocommerce archive category page, but there is a few things I could not figured out. Maybe you can help me out!

1. On all category page, there is a white gap between my top banner and the menu header. You can see what I mean here: https://www.avanaa.ca/en/categorie-produit/selection-en/ . I can’t figure out how to get rid of that gap with custom css.

2. I made the category pages full screen (to get a full screen banner as seen on previous link), but now my product images take too much space. I would like to restrict the width of the “container” with all the products image in the category page (only on large screen size).

Cheers,
Malik

[avanaa]

I did figure out how to change width on my main shop and category page with this css:

@media (min-width: 1400px) {
.post-type-archive-product .x-container.max.offset ul.products, .archive ul.products.cols-3 {
   margin: 0 auto !important;
   max-width: 70% !important;
   width: 70% !important;
}
}

So now I would only need some guidance about the gap on the category pages.

Thanks

[christian]

Hey @avanaa,

It’s because of the empty <p></p> tag above your content. It’s usually a new line space within the text editor. It’s generated by WordPress automatically. Please check your content if there’s a space above and remove it.

Thanks.