Woocommerce: how to show two columns for “Related Products” for mobile

  • Hi there

    I’ve tried many different methods but really cannot get my “Related Products” to show two columns instead of one on mobile view.

    You can see the problem in here here.

    You can see the generated CSS here.

    The current code I am trying is

    
  @media screen and (max-width: 767px){
.related.products ul.products li.product  {
width: 50% !important;
}
}

    But I’ve also tried flexbox options.

    Please help!`

    I am using GeneratePress Premium 1.12.3.

    • This topic was modified 2 years, 6 months ago by rt32kd.
Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi @rt32kd,

    The theme by default has no control over the layout of product pages.

    Can you provide the link to a page where we can view the issue?

    Thread Starter rt32kd

    (@rt32kd)

    Hi there,

    The link is here under Sleep Essentials.

    Just to reiterate, the issue is on mobile. If you reduce the screen width, you can see that the CSS above squashes the recommended products to the left but doesn’t stack in 2 columns.

    Thank you!

    • This reply was modified 2 years, 6 months ago by rt32kd.

    Hi there,

    i do not see any columns ( related products ? ) on the URL you provided.

    And the Free version of GP doesn’t interfere with Woocommerce, and i see the single product is built with Beaver Builder, so i am not sure what the issue is or what the theme has to do with it.

    Thread Starter rt32kd

    (@rt32kd)

    My apologies! I’ve updated the link.

    Related products is under “Sleep Essentials”.

    This is the premium version of GPP.

    • This reply was modified 2 years, 6 months ago by rt32kd.

    We are forbidden by WordPress to provide support for any premium products in this forum.

    You will need to raise a support topic in our premium support:

    https://generatepress.com/support/

    Thread Starter rt32kd

    (@rt32kd)

    Thanks David, but I can’t.

    I’m in a grey area where I’ve inherited a website developed by another developer who purchased the premium version. But I do not have the license key and they have long disappeared from the project so I am no longer able to get updates or use premium support.

    Thread Starter rt32kd

    (@rt32kd)

    This was the code that fixed the issue:

    @media screen and (max-width: 767px){
 .woo_rel .related.products ul.products{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-gap: 0;
 }
 .woo_rel .related.products ul.products li.product{
   width: calc(50% - 10px);
 }
}

    Glad to hear you found a solution!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Woocommerce: how to show two columns for “Related Products” for mobile’ is closed to new replies.