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

Support responsive rich resource types #293

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

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