-
Notifications
You must be signed in to change notification settings - Fork 8
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
Video element overflows on summary pages when screen width is less than 700 px. #132
Comments
Can you please link how the page is getting rendered? I want to see the html tree |
Proposed solution: an easy fix would be to add width 100% to the styling of the video tag, the video will render according to the size available, taking 100% of it. Tried for multiple devices, it is working. |
Any updates? @HarshKapadia2 @tusharnankani @SirusCodes |
Here:
Would you like to open a Pull Request? Feel free to make the changes in the /summary/static/css |
Alright will do. |
Fixed issue OurTechCommunity#132. The video now takes the 100% available space according to the device width, the box sizing property makes sure that the padding and margin remains intact.
I have created the PR. Well sorry for the commit name, I had updated the commit name where it asks again for some reason it didn't show up. |
* Update summary-style.css Fixed issue #132. The video now takes the 100% available space according to the device width, the box sizing property makes sure that the padding and margin remains intact. * Fix: video element overflow on summary pages when screen width is less than 700
We add a video to indicate that we forgot to take a picture during a particular CatchUp session, for example in the 74th CatchUp summary.
We haven't added any size restrictions to that element, so maybe that's why it overflows on screens less than 700 px in width. The page becomes horizontally scrollable and can be zoomed out, when both of those should not be required.
This affects the common summary page and the individual summary pages with such a video included (Eg: 74th CatchUp summary).
One thing to remember while assigning a width would be the we need to maintain the aspect ratio of the video. (This might be achieved using the
aspect-ratio
property, but this is just a suggestion.)Normal page load (overflow should not exist):
Zoomed out (should not happen):
The text was updated successfully, but these errors were encountered: