Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-27-2013, 12:14 AM   PM User | #1
artbum
New to the CF scene

 
Join Date: Oct 2012
Posts: 3
Thanks: 2
Thanked 0 Times in 0 Posts
artbum is an unknown quantity at this point
How to make div resize on 16:9

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.
artbum is offline   Reply With Quote
Old 01-27-2013, 03:57 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,395
Thanks: 18
Thanked 351 Times in 350 Posts
sunfighter is on a distinguished road
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/.../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.

Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@media only screen and (max-width: 1440px) {
body{
	background-color:red;
}
}
@media only screen and (max-width: 800px) {
body{
	background-color:blue;
}
}
@media only screen and (max-width: 650px) {
body{
	background-color:green;
}
}
</style>
</head>

<body>
</body>
</html>
sunfighter is offline   Reply With Quote
Users who have thanked sunfighter for this post:
artbum (01-29-2013)
Old 01-27-2013, 09:55 PM   PM User | #3
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,465
Thanks: 0
Thanked 499 Times in 491 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
Quote:
Originally Posted by artbum View Post
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.
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
felgall is offline   Reply With Quote
Users who have thanked felgall for this post:
artbum (01-29-2013)
Old 01-29-2013, 12:21 AM   PM User | #4
artbum
New to the CF scene

 
Join Date: Oct 2012
Posts: 3
Thanks: 2
Thanked 0 Times in 0 Posts
artbum is an unknown quantity at this point
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.
artbum is offline   Reply With Quote
Old 01-29-2013, 02:32 PM   PM User | #5
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,395
Thanks: 18
Thanked 351 Times in 350 Posts
sunfighter is on a distinguished road
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.
sunfighter is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:28 AM.


Advertisement
Log in to turn off these ads.