Skip to content

Conversation

@robd003
Copy link
Contributor

@robd003 robd003 commented Jun 29, 2018

A lot of widgets have a minimum width or height and if the consumer
tries to scale down a rich content response for a mobile browser by
using an assumed aspect ratio from the height/width it will most likely
cut off part of the content.

A lot of widgets have a minimum width or height and if the consumer
tries to scale down a rich content response for a mobile browser by
using an assumed aspect ratio from the height/width it will most likely
cut off part of the content.
@robd003 robd003 mentioned this pull request Jun 29, 2018
@robd003
Copy link
Contributor Author

robd003 commented Jun 29, 2018

I've had problems with my static height widget being resized due to consumers assuming they should use an aspect ratio when displaying our content. If we implement a min & max for width and height then responsive widgets can be displayed without having content cut off or tons of whitespace.

@robd003
Copy link
Contributor Author

robd003 commented Jul 24, 2018

@iamcal Any chance we could discuss this pull request?

@trackleft
Copy link

Why not set an aspect ratio instead of a min max width height?
Bootstrap wraps iframes with a div like this https://getbootstrap.com/docs/4.5/utilities/embed/#aspect-ratios
This adds some CSS that does this

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}
.embed-responsive::before {
    display: block;
    content: "";
}

Which can be calculated like shown in this file https://github.com/twbs/bootstrap/blob/c28934cb1871d6b6bd6a866660493a1137de17c6/scss/helpers/_embed.scss

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants