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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Media queries (min-width: Xpx) and (max-width: Ypx) don't work

    I am working on the lynda.com tutorial "From: WordPress: Building Themes from Scratch Using Underscores with Morten Rand-Hendriksen" and have found that the @media queries (min-width: Xpx) and (max-width: Ypx) do not work in the browser as set in the CSS code. After some experimenting, I found that the breakpoints seen with the developer tools (accessed after pressing F12) when resizing the Chrome browser are about 1/2 the value set in the code. So, for example, if the code is set for 2200px then the break will occur when the developer tool indicates 1100px.

    I also verified this discrepancy at Tryit Editor v2.6. When I resize the browser, the code states that the break point is 480px but the developer tools indicate it is at 1002px.

    So, my question is, does anyone know why there would be so large a discrepancy between the coded set points and that seen in the browser?

    If one cannot depend on what the code indicates should happen, then what's wrong with how the browsers' interpretation of that code?

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,934
    Thanks
    31
    Thanked 948 Times in 945 Posts
    Maybe Chrome's developer tools suck.

    a discrepancy between the coded set points and that seen in the browser
    In firefox the example works as expected.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Nov 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now that you mention it, I'm not exactly sure what the http://www.codingforums.com/redirect...media_example1 means by the "viewport". Chrome does show the change in color at 1001 to 1002 pixels, but that is the width of the entire browser window and maybe they mean only their "Result" frame. I wrote a very simple set of html/css files that simply had the color of the text change at 500 to 501 pixels and Chrome shows that this happens at 499 to 500 pixels. So, maybe that example is not a good one.

    However, there seems to be something else going on with that tutorial file set because it does act as I posted, which is not correct. I am going to start over.

  4. #4
    New Coder
    Join Date
    Jun 2015
    Posts
    67
    Thanks
    1
    Thanked 1 Time in 1 Post
    in different browser such problems are very common, css code are there to reslove such problem
    nav {
    background-color: red;
    background-image: url(gradient-slice.png);
    background-image: -webkit-linear-gradient(top right, #A60000, #FFFFFF);
    background-image: -moz-linear-gradient(top right, #A60000, #FFFFFF);
    background-image: -ms-linear-gradient(top right, #A60000, #FFFFFF);
    background-image: -o-linear-gradient(top right, #A60000, #FFFFFF);
    background-image: linear-gradient(top right, #A60000, #FFFFFF);
    }


 

Tags for this Thread

Posting Permissions

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