Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Media & Text Block: Allow Stacking on Mobile #10798

Closed
ZebulanStanphill opened this issue Oct 19, 2018 · 7 comments

Comments

Projects
None yet
6 participants
@ZebulanStanphill
Copy link
Contributor

commented Oct 19, 2018

The issue

The recently-merged-into-master Media & Text block is currently not responsive, and so it doesn't work that well on thin viewports. I think the block should be made responsive so that it adapts on phone-width screens.

@ZebulanStanphill ZebulanStanphill changed the title Media & Text block: Add responsive option Media & Text block: Make responsive Oct 19, 2018

@jorgefilipecosta

This comment has been minimized.

Copy link
Member

commented Oct 19, 2018

Hi @ZebulanStanphill, thank you for your tests to the block and for creating this issue.

During the discussion, we had on the PR #9416 we decided that no fixed widths in pixels would be used and that the content would always be side by side.
So we had some improvements here, and what happens is that we compute the % used by the media area, and that % is used in both mobile and desktop.

This is exactly what we are doing now:
oct-19-2018 16-03-37

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

commented Oct 19, 2018

@jorgefilipecosta I know, but I think that it would be nice if there was an option to make the text go below the media, since having both side-by-side on a phone is rarely desirable in practice (e.g. CTAs or feature lists next to images).

@mtias mtias added the Blocks label Oct 23, 2018

@mtias mtias changed the title Media & Text block: Make responsive Media & Text Block: Allow Stacking on Mobile Oct 23, 2018

@mtias

This comment has been minimized.

Copy link
Contributor

commented Oct 23, 2018

Updated the title.

@timnicholson

This comment has been minimized.

Copy link

commented Nov 1, 2018

FWIW I agree 100% that the text should collapse under the image on smaller screen-widths like a smartphone. This is essentially standard practice these days on websites.

Please do keep in mind that the Media & Text block isn't always (usually?) going to have just a single word in it ("Video" in your example). A lot of websites are going to use it to show a large image of a product, a theme, an album, etc., etc. with a long description or bullet lists of features in the text. That really looks terrible on a smartphone.

Collapsing columns on mobile is so commonplace now I would actually tag this as a bug not an enhancement request.

This collapsing should apply to the Column blocks too (and anything else that is added that uses columns).

I totally get why you would want to avoid hard-coding some number of pixels with @media selectors, but let's face it... that's how it's done everywhere. The default theme in WordPress core (Twenty Nineteen) uses 768px. I'm active in that git repository too so if a final decision is made that GB itself isn't going to handle mobile, then the core theme should (and documentation put out there for all theme developers to address this in all their themes).

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

commented Nov 1, 2018

@timnicholson Just in case you aren't aware, the Columns block actually got responsive breakpoints in 4.1.

@robjaykes

This comment has been minimized.

Copy link

commented Nov 8, 2018

@timnicholson Just in case you aren't aware, the Columns block actually got responsive breakpoints in 4.1.

But media cannot be inserted into Column blocks.

I can't understand why some people are justifying text not falling below media on mobile. Media and text sitting side by side each other on a phone screen compared to being responsive is where we were at a decade ago.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

commented Nov 9, 2018

@robjaykes

But media cannot be inserted into Column blocks.

Yes it can. The Columns block lets you insert any block in one of its columns.
image

Also, #10969 has implemented stacking on mobile for the Media & Text block, hence why this issue has been closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.