Theme LH Consulting Prime - integrate the column height

Hi there,

Give this CSS a shot:

@media (min-width: 769px) {
    .page .woocommerce ul.products.columns-4 {
        display: flex;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi Leo

It seems work on the index page.
However, would you please check my webpages, all of them look like the below image.

https://drive.google.com/file/d/1IsqsjdZzk3_j9S6ha19lX6bHwgNxktEz/view?usp=sharing

Try the edited CSS instead:
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064

Dear Leo

After used your code to replace the default css, it seems working,
Did I make the correct setting?

Your code:
@media (min-width: 769px) {
.page .woocommerce ul.products.columns-4 {
display: flex;
}
}

Replaced default code:
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}

Sorry not sure if I understand.

This should be all you need:
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064

Not sure what you meant by replacing the other block?

I found there is a lot of built-in CSS code under the below place
Appearance > Customize > "Additional CSS"

As you provided the CSS code, do I need just paste wherever place inside the "Additional CSS"?
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064

or do I need to replace the below code inside the "Additional CSS", it is because below code look like the similar stuff.

@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}

No need to remove any existing code in Additional CSS.

Simply add the new code:
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064

Below the last line of the existing CSS.

Dear Leo

Thanks for your help,
I followed your instruction not remove any existing code and pasted the code you provided, it all fixed on desktop and ipad verison. Look exactly what I want.

Do you know how can I also fix this problem on the mobile version as well?
Thanks

Hi there,

try adding this CSS:

@media(max-width: 768px) {
    .woocommerce .products ul, .woocommerce ul.products {
        display: flex;
        flex-wrap: wrap;
    }
    .woocommerce ul.products li.product {
        margin-right: 10px;
    }
}