1

I have a simple homepage design with a header, footer, left and right column. I use bootstrap 4 for this. In the right column I have a video with a certain aspect ratio. Unfortunately the video doesn't have the same width as one of the predefined columns settings.

I am getting complaints when people resize their browser from an original 2560x1440

So i am testing with a bit of a hacky solution, like:

@media (min-width : 2000px) and ( max-height: 1200px ) {
    #show-one-column-layout, .show-one-column-layout {
        display:block;
    }

    .show-fullscreen-layout {
        display:none;
    }
}

I just put the layout in a big container, but now I am thinking to trigger this when the browser has a smaller aspect ration then 1.6-1.7

but not with a min-width of 2000px???

[EDIT] I am trying with @media (min-aspect-ratio: 8/5) { but I am missing something

nickhar
  • 19,981
  • 12
  • 60
  • 73
alex
  • 4,804
  • 14
  • 51
  • 86
  • What if you make it `min-device-aspect-ratio` instead of `min-aspect-ratio` – Mark van der Dam Aug 19 '19 at 13:17
  • @Mark_Ed, going to try it out. Is there any way to just trigger if the browser is being resized by xx% or resized at all??? – alex Aug 19 '19 at 13:48
  • You can use javascript for that, check https://stackoverflow.com/questions/2996431/detect-when-a-window-is-resized-using-javascript – Mark van der Dam Aug 19 '19 at 13:51
  • Tx, but then i still need a way to trigger the css style definitions. Oh and does anything like this exists in CSS: `@video (min-aspect-ratio: 8/5) {` so checking if the video div has a certain aspect ratio and if not do..... – alex Aug 19 '19 at 14:03
  • There is not anything named @video in css as far as I know – Mark van der Dam Aug 19 '19 at 14:36

0 Answers0