column block – Responsive problem : it doesn’t stack on small devices

  • Resolved FGU Nord / Lars

    (@medieskolen)


    6 years, 1 month ago

    The Column block still isn’t really responsive ??

    Try to make a 3 column block … and test it on a smartphone … it works badly because it doesn’t stack on small devices.

    Real responsiveness (with stacking on small devices) is vital – otherwise it’s useless in my opinion

    I really really hope this will be fixed soon … please

    Lars, Copenhagen

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Lars
    I agree that making columns responsive is an important missing function in Gutenberg.
    There is an issue open on Github to address this (follow progress here), so hopefully this will be added at some point.
    In that issue, a temporary workaround is proposed. Adding the following to your css (let me know if you need help with that) will make columns stack on screens under 767px.

    @media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}
    Thread Starter FGU Nord / Lars

    (@medieskolen)

    Hi Anne

    Thanks for the workaround ?? .. it should be easy to use for me …. but this HAS to be fixed in the Columns block it self

    Lars

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘column block – Responsive problem : it doesn’t stack on small devices’ is closed to new replies.