[Bug]: Content overflows outside content area on mobile devices for theme Feelin' Good

[krutidugade]

Quick summary

Feelin' Good theme is not mobile responsive. The content added overflows outside content area for mobile devices. Some of the content can't be seen. User reported issue with videos on their site in -zen. I could replicate this on my site - https://testbizplanplayground.wpcomstaging.com/home-2/

Steps to reproduce

1. Activate Feelin' Good theme - https://wordpress.com/theme/feelingood
2. Create a page and add image block with image
3. Add videopress block with a video
4. Add few column blocks with content
5. Add paragraph block with some text
6. Publish the page
7. Check the page on mobile device

What you expected to happen

The content should appear within the content area

What actually happened

The content (text, image, video) stretches outside the content area making a portion of it not visible to viewers

Browser

Google Chrome/Chromium

Context

Customer report in 7894295-zen regarding video not fitting in the frame.

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

No response

Reproducibility

Consistent

Severity

None

Available workarounds?

None

Workaround details

On inspecting I noticed, this is caused because of following CSS

body .is-layout-flex {
display: flex;
}

Changing to display:block fixes the issue but I feel this workaround is incorrect. Let me know if this would work as temporary fix:

@media only screen and (max-width: 600px) {
body .is-layout-flex {
display: block;
}
}

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• -zen
• 7894295-zen

[mpkelly]

I have reproduced this and will look at a fix now.

[mpkelly]

This is turning out to be a tricky issue. The fix is simple in theory but can be made in different places: core, Jetpack, and individual theme files. I've found that most themes don't have this issue, but comparing those with Feelin' Good, I can't see what's different. Ideally, I would make Feelin' Good consistent with them rather than add some special CSS to its theme.

Another option is to update Jetpack in a way that iframe use width:100%; max-width: nnnpx instead of width:nnnpx as the first one will not overflow like the containers. I've drafted a PR, Automattic/jetpack#37025, but I'm still not sure it's the best solution and testing turned out to be problematic anyway.

I also found that the Freddie theme has a similar issue to the one reported here. There are probably others, too, which makes me think that we should fix it in the block. I will try and deploy something tomorrow.