If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

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.

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.

Users who have thanked felgall for this post:

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.