columns wrap

  • I am using Chaplin for my first website project and I really love it, it’s very easy for beginners like me to work with.
    I have come across a problem that I haven’t been able to solve:

    The Chaplin two-column block is wrapping in a weird manner:
    The desktop view is fine at 66-33-column layout (>782), but the medium view (599-782) suddenly moves to a very slim 50/50 layout, before the columns nicely stack in the mobile view (<599).
    You can see this here: https://stadtbewusst.de/berlin-zu-fuss/

    My question: how can I prevent the columns to appear in 50-50 style in the medium view? I would like to go from desktop view (66-33 column layout) to the mobile stacked view (starting at <782).

    Thank you very much in advance!
    Steffi

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

Viewing 1 replies (of 1 total)

  • @steffikah I saw your support post and got curious. I see the issue you’re describing, and it is not specific to Chaplin. All WordPress sites work like this.

    The WordPress block styles library has the following rule that produces what you’re seeing:

    @media (min-width:600px) and (max-width:781px) {
	.wp-block-column {
		flex-basis:calc(50% - 16px)!important;
		flex-grow:0
	}
}

    This even forces 3-column layouts to wrap the 3rd column onto a second row with each column at 50%. I would speculate that this is because they are trying to retain the editor’s intent to have columns at as narrow a width as possible. However, I can see why this would be very unexpected!

    If you want to inquire further, the Gutenberg Repository Issues on Github is probably where to open a ticket.

Viewing 1 replies (of 1 total)
  • The topic ‘columns wrap’ is closed to new replies.