diff options
| author | Teddy Wing | 2018-11-19 01:56:29 +0100 |
|---|---|---|
| committer | Teddy Wing | 2018-11-19 06:30:07 +0100 |
| commit | 8b1413d2d4295f2c8e4359bf9fa2528e9809cf41 (patch) | |
| tree | 30d8a3767479fb3bab426b9cc90667f404f758a3 | |
| parent | c7684a1f662442d08c63b27abda3a4055d897165 (diff) | |
| download | dome-key-web-8b1413d2d4295f2c8e4359bf9fa2528e9809cf41.tar.bz2 | |
Fix video width on small screen widths
When the screen width gets small enough to clip the video, reduce the
width of the video to the content width.
Couldn't use the same larger-than-content-width layout, at least not
easily, because the percentage would need to be dependent on the window
width, not the width of the video element's container.
| -rw-r--r-- | assets/styles.css | 6 | ||||
| -rw-r--r-- | assets/stylesheets/layout.hcss | 7 |
2 files changed, 13 insertions, 0 deletions
diff --git a/assets/styles.css b/assets/styles.css index f70e50b..5db5988 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -167,6 +167,12 @@ ul { color: #c9ccb4; text-shadow: 1px 3px 5px #230f0f; } +@media screen and (max-width: 870px) { + .content video { + width: 100%; + margin-left: 0; + } +} @media screen and (max-width: 767px) { header { margin-left: -8px; diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss index e06fc88..3eff9d4 100644 --- a/assets/stylesheets/layout.hcss +++ b/assets/stylesheets/layout.hcss @@ -113,6 +113,13 @@ ul { } +@media screen and (max-width: 870px) { + .content video { + width: 100%; + margin-left: 0; + } +} + @media screen and (max-width: 767px) { header { margin-left: -8px; |