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

Fix clipping issue with Instagram embed #10437

Merged
merged 1 commit into from Oct 9, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Oct 9, 2018

This fixes #10410.

Instagram embeds have a minimum width of 326px. We set it to 290px, which caused clipping.

This PR bumps the minimum width to 360px to give some margins, but it would be good to test other floated embeds to see what kind of min-widths they apply.

Screenshots of the fix:

screenshot 2018-10-09 at 14 08 21

screenshot 2018-10-09 at 14 08 26

Fix clipping issue with Instagram embed
This fixes #10410.

Instagram embeds have a minimum width of 326px. We set it to 290px, which caused clipping.

This PR bumps the minimum width to 360px to give some margins, but it would be good to test other floated embeds to see what kind of min-widths they apply.

@jasmussen jasmussen added the [Type] Bug label Oct 9, 2018

@jasmussen jasmussen added this to the 4.1 milestone Oct 9, 2018

@jasmussen jasmussen self-assigned this Oct 9, 2018

@jasmussen jasmussen requested review from kjellr, notnownikki and WordPress/gutenberg-core Oct 9, 2018

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Oct 9, 2018

Member

Looks good to me, although I'm curious why we chose 290px to begin with?

Member

notnownikki commented Oct 9, 2018

Looks good to me, although I'm curious why we chose 290px to begin with?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 9, 2018

Contributor

although I'm curious why we chose 290px to begin with?

Long story.

Content width is 580, because in a past PR we made it that due to being a good combination of legibility and font size. I recall us using a calculator to get to this or something.

290 is $content-width / 2, basically to achieve a visual balance.

Contributor

jasmussen commented Oct 9, 2018

although I'm curious why we chose 290px to begin with?

Long story.

Content width is 580, because in a past PR we made it that due to being a good combination of legibility and font size. I recall us using a calculator to get to this or something.

290 is $content-width / 2, basically to achieve a visual balance.

@notnownikki

Thanks for explaining @jasmussen

I think we can go with this, and we should look at floated embeds as a whole to make sure we're doing things right for different providers and different themes in a follow up to this.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 9, 2018

Contributor

Created #10440 to track the audit.

Contributor

jasmussen commented Oct 9, 2018

Created #10440 to track the audit.

@jasmussen jasmussen merged commit 8b4c97d into master Oct 9, 2018

2 checks passed

codecov/project No report found to compare against
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/embed-float-fix branch Oct 9, 2018

@gziolo gziolo modified the milestones: 4.1, 4.0 Oct 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment