Mobile products page

[dekoningalex]

Hi,

Could you provide me with the css to have rows of 2 products next to each other on mobile versions instead of 1 big one (screenshot).

Thanks!

[Laura]

Hello, try by adding this to style.css of child theme

COPY CODE

@media (max-width: 991px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: 50% !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

hi Laura,

that fixed the problem, however now there is a problem with displaying products. They are not always per 2 but somehow also per 1 sometimes which looks and is quite odd (see screenshots). What is causing this and how to fix it? Thanks!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, if you modify the % of the width, doe it fix it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

I tried lowering the percentage but that doesn’t work.

[Laura]

Hello, does this help?

COPY CODE

.kleo-shop-3 li.product:nth-of-type(3n+1), .kleo-shop-cols-3 li.product:nth-of-type(3n+1), .woocommerce.columns-3 li.product:nth-of-type(3n+1) {
    clear: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

Unfortunately, that doesn’t help either.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Add this CSS

COPY CODE

@media(min-width:991px){
    .woocommerce-page ul.products li.product h3 {
        min-height: 120px;
    }
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

The white space is still there (see screenshot)

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,
That’s because the review stars appears on some products and on some not, did you have posibility from the plugin settings to make them to be shown always?

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

I can’t find a review plugin installed. Isn’t that a build-in function already present in woocommerce?

[Radu]

Ah, you right, the review feature comes from the wocoomerce

The only way to can have layout in two columns without jumping it’s with this css, will make the product title to have a min-height value to can have on every row two columns.

COPY CODE

@media (max-width:991px){
    .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {min-height:99px;}
    .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {padding-top:0;}
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts