View Full Version : How to make div resize on 16:9

01-27-2013, 01:14 AM
Hi, I have this popup div which looks fine on most monitors except for widescreen because the height is too short. I've been looking into media queries but don't know much about how to implement it.

Site: http:10in30.com < on widescreen monitors the popup gets cut off somewhere around the name and email boxes.

I found this: @media screen and (device-aspect-ratio: 16/9) { }

but don't know where to paste that. Not very good with css.

Is there a way to make the div inside of the orange border box shrink if it detects widescreen?

I'm using Wordpress, theme: Weaver 2 Pro, I can insert custom css.

01-27-2013, 04:57 PM
You should know that modern browsers control wither they see pop ups or not. I went to you site http:10in30.com and saw nothing because I block pop ups and I think the majority of users do.

Given that, setting your css to look good in various monitor dimensions is a good idea. A good place to get all the info on this is https://developer.mozilla.org/en-US/docs/CSS/Media_queries

The @media and screen sizes works when you use CSS3. @media breaks the css up into sections, each section has it's own rules. This way you can write general rules and than place important rules or rule changes after in their own section.

In my example I used max-width. You might want to try min-width for what you want. But this example works in firefox (did not test in anything else) If you shrink the browser width after loading you will see the back ground color change.

<!DOCTYPE html>
<style type="text/css">
@media only screen and (max-width: 1440px) {
@media only screen and (max-width: 800px) {
@media only screen and (max-width: 650px) {


01-27-2013, 10:55 PM
I found this: @media screen and (device-aspect-ratio: 16/9) { … }

The screen size is irrelevant to web pages (except for mobile devices that open the browser window full screen). Many people with widescreens will use the window-leftarrow and window-rightarrow keys to display two windows side by side so that the browser will only get just under half the screen width. So then you are applying your style on the assumption that their browser is wider than it is tall where it is actually taller than it is wide and then your result will not be what you want.

If you need to change the appearance based on the adpect ratio then it is the aspect ratio in the browser that would be relevant - not that of the screen.

01-29-2013, 01:21 AM
Ahh good point felgall. Thanks. So I should go with "minimum width" like sunfighter mentioned.

Thanks sunfighter, I'll use that example you posted. Wondering, I'm using a popup that doesn't open a new window. Are you using some advanced popup blocking plugin? Because I have 'block popups' turned on in all of my browsers on my mac and pc's and it does not block these. It's the typical ones you see like a lightbox with an x in a circle on the top, right.

01-29-2013, 03:32 PM
I just went back to check http:10in30.com with firefox's block pop up on and then off, never saw the pop up in either configuration.