Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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>

  • Users who have thanked sunfighter for this post:

    artbum (01-29-2013)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    artbum (01-29-2013)

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •