Bug in responsive behaviour for images for 2-column design

[skornyakov]

Describe the bug
When using a two-column page layout with images in each column. Actually shown image / column widths are narrower for larger screens (see attached gif), images snap to smaller while screensize is increased.

To Reproduce
Steps to reproduce the behavior:

1. Go to any Twenty-Nineteen Theme WP 5.0.2 blog or e.g. 'https://scrum-master-zertifizierung.com/'
2. Rezise your window and see what happens to the size of the columns.
3. See error

Expected behavior
Expected would be that for larger screens the space used for images is larger.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: chrome
• Version 71

Additional context

• WP Version 5.0.2, Theme: Tweenty-nineteen 1.1. (but the same problem occurs with other Guttenberg compatible themes) # #

[fiddike]

Same Bug here,
OS: Ubuntu Linux 18.04 with latest updates,
Browser: Chrome 70.0.3538.77 (Official Build) (64-bit),
WP Version: 5.0.2, Theme: Tweenty-nineteen 1.1., also tried commercial Theme "Enfold" which shows the same bug when pages are edited with Gutenberg.

[skornyakov]

WP Version 5.0.3, Theme Tweenty-nineteen 1.2 - bug still the same

[Soean]

This is not Gutenberg related, it is caused by the twentynineteen theme.

The content on tablets is wider than on desktop:
https://github.com/WordPress/wordpress-develop/blob/5.1/src/wp-content/themes/twentynineteen/sass/variables-site/_structure.scss#L7-L8

It was added in WordPress/twentynineteen#502 by @kjellr. Maybe he can confirm if it's a bug or a feature.

[kjellr]

Thanks for the ping, @Soean. This is working as designed. By default in Twenty Nineteen, the columns block only takes up the width of the text column by default. If wider columns are desired on larger screens, the columns block itself can be set to wide or full:

[skornyakov]

Thank you @Soean and @kjellr for looking into this. I believe there is still a problem.

The behaviour @kjellr is showing in the gif is working great, but it's the editor view. For us it also works flawlessly in editor view. However the live-site itself reacts differently, at least in our case. Especially, around the breakpoint of 768px width the distance between the pics becomes very large. What about your example-site @kjellr?
Thank you, Anton

[kjellr]

Yes, it looks like front-end and back-end appearance has fallen out of sync since Twenty Nineteen was released:

Since this is due to styles in Twenty Nineteen, it should be fixed over on Trac. I've opened a ticket for it there:

https://core.trac.wordpress.org/ticket/46643

I'm going to close this ticket in the meantime, but thanks for the report, @skornyakov. Feel free to chime in over there with any additional details.

[fiddike]

Thank you very much @kjellr for investigation and trac ticket creation! We appreciate it!