column stack on mobile

  • Resolved Garry Rigby

    (@indigojones66)


    3 years, 6 months ago

    How do I target the red column with three images?
    I want to stop this block from stacking the images on mobile.

    This did work but there is no longer any space between the images:

    .wp-block-columns.midmost-class.has-vivid-red-background-color.has-background {
    flex-wrap: nowrap;
    }

    I have targeted the top six images with…

    @media (max-width: 480px) {
    .wc-block-handpicked-products .wc-block-grid__products {
    display: flex !important;
    }

    .wc-block-handpicked-products .wc-block-grid__product {
    flex: 1 0 33% !important;
    }
    }

    I have targeted the bottom four images with…

    @media (max-width: 480px) {
    .peter3-class .wc-block-grid__products {
    display: flex !important;
    }
    .peter3-class .wc-block-grid__product {
    flex: 1 0 25% !important;
    }
    }

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support David Smith

    (@get_dave)

    Hi Garry,

    Let’s see if I can help you.

    I want to stop this block from stacking the images on mobile.

    I’ve made a quick video for you which shows how to stop the block from stacking on mobile.

    This did work but there is no longer any space between the images:

    I took a look at the link you provided and everything is looking pretty good now. Did you solve your issue?

    Thanks

    Thread Starter Garry Rigby

    (@indigojones66)

    Hi David, thanks for that but unfortunately ‘Stack on mobile’ does not appear in my side panel?
    See image : https://www.hardy.global/no_stack.jpg

    I am running…
    WooCommerce Blocks Version 5.7.0
    WooCommerce Version 5.6.0
    Wordpress Version 5.8
    Intuition Pro Version: 2.3.1

    Regards Garry

    Plugin Support David Smith

    (@get_dave)

    Hi Gary. Ah I see you are not using the Gutenberg Plugin but rather the version of Gutenberg that is currently merged into WordPress Core.

    In which case you won’t have that toggle available until WordPress 5.9 which is late this year.

    Alternatively you could (at your own risk) install the Gutenberg Plugin which gives you the latest features every two weeks, but you should be aware then you’d be running on the bleeding edge of things and you might experience some instability.

    In terms of the CSS I would advise setting flex-direction: column on the wrapping <ul>. You should apply that in a suitable media query.

    You could also check out this CSS Tricks article which is all about styling the Columns block and even has a section on handling responsive.

    I hope that helps and good luck!

    Thread Starter Garry Rigby

    (@indigojones66)

    Ah ha! Thanks again David

    Plugin Support David Smith

    (@get_dave)

    You are most welcome @indigojones66!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘column stack on mobile’ is closed to new replies.