blocks stacking on mobile

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Thu P. a11n

    (@thup90)

    Hi there,

    You could try the below:

    @media (max-width: 480px) {
.wc-block-grid.has-6-columns .wc-block-grid__product {
    margin: 0 0 24px!important;
}
}
    • This reply was modified 3 years, 6 months ago by Thu P. a11n.
    Thread Starter Garry Rigby

    (@indigojones66)

    Thanks very much Thu, that found the target although I changed 24px (which made gap larger) to -12px.
    Have you any idea how one could move the text closer to the image?

    Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hi @indigojones66,

    Looking a the product grid for you today the margin is actually under the products and not on top.

    Image Link: https://cloudup.com/cbg5UJXccFL

    The css below allows you to adjust that spacing.

    @media (min-width: 481px) and (max-width: 600px) {
    .wc-block-grid.has-6-columns .wc-block-grid__product {
	margin: 0 0 -12px !important;
    }
}

    Image Link: https://cloudup.com/c7jyoVgTFuU

    Thread Starter Garry Rigby

    (@indigojones66)

    Thanks very much Stuart

    Plugin Support Aashik P – a11n

    (@aashik)

    Hi there!

    Glad we were able to get this resolved for you.

    I’ll mark this topic as solved for now. Please feel free to open a new topic if you have any other questions.

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