www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: Responsive media queries not working

  1. #1
    Join Date
    Aug 2014
    Posts
    3

    Responsive media queries not working

    Hey,

    So I am trying to make my portfolio website responsive for different screen resolutions. I am using media queries but they are not over-riding the native styles. I believe my syntax is correct but I will share it with you guys to see if I have done anything wrong.
    HTML Code:
    <link href="css/responsiveIndex.css" rel="stylesheet" type="text/css"/>
    This links to my stylesheet.

    I am currently testing for a with a resolution of 1680 x 1050 which has the following media query
    HTML Code:
    @media only screen 
    and (min-width : 1680px) {
    	.cont_1_text {
    	font:Helvetica, Sans-serif;
    	font-size: 120px;
    	color: #ffffff;
    	}
    
    	.cont_1_text2 {
    	font: Helvetica, Sans-serif;
    	font-size: 50px;
    	color: #ffffff;
    	}
    }
    All it needs is for the text to be scaled down a bit.
    Thanks in advance to who ever can help me fix this issue.

  2. #2
    Join Date
    May 2014
    Posts
    893
    1680 is not 1680 friendly -- the width used for calculation there is the available space inside the browser -- so you have to account for browser "chrome" like the window frame and the scrollbar, as well as anything else in the way.

    Though you're non-condensed properties, changing font-size without resetting the line-height, massive px metric font sizes and lack of a MEDIA attribute on your CSS link (which done right would likely mean NOT having to say "screen only" in your media query) all raise a number of warning flags about your design.

    Much less the vague classes that don't really say what the elements ARE.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Aug 2014
    Posts
    3
    Quote Originally Posted by deathshadow View Post
    1680 is not 1680 friendly -- the width used for calculation there is the available space inside the browser -- so you have to account for browser "chrome" like the window frame and the scrollbar, as well as anything else in the way.

    Though you're non-condensed properties, changing font-size without resetting the line-height, massive px metric font sizes and lack of a MEDIA attribute on your CSS link (which done right would likely mean NOT having to say "screen only" in your media query) all raise a number of warning flags about your design.

    Much less the vague classes that don't really say what the elements ARE.
    So you suggest? It worked perfectly well until I moved the file containing the queries into a new folder in my directory...

  4. #4
    Join Date
    Mar 2012
    Posts
    1,493
    The idea of responsive design is to accommodate device widths down to, say, 320px wide. And generally with a number of cut-off widths on the way. How is one media query set at 1620px going to achieve that?

  5. #5
    Join Date
    Aug 2014
    Location
    Banglor
    Posts
    7
    you can also use bootstrap js and css to make responsive portfolio.

  6. #6
    Join Date
    May 2014
    Posts
    893
    Quote Originally Posted by Magically View Post
    So you suggest? It worked perfectly well until I moved the file containing the queries into a new folder in my directory...
    Good rule of thumb is use 32 to 48px less for your trigger. Pretty much 32 will do the trick as that allows enough for the handful of browsers/OS that still show borders when maximized, (typically 6px each) and a scrollbar (of 16px), with 4px to 'spare'.

    So trigger at 1648 instead of 1680.

    Though REALLY your triggers shouldn't be in pixels in the first place, particularly that large -- it shows pixel thinking and pixel thinking is broken accessibility. Hence why you should probably be using EM's in there just as the WCAG suggests.

    Moving the file probably has nothing to do with it -- before you 'moved' it, was it showing scrollbars? dimes to dollars you had no vertical scrollbar and now you do.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Feb 2013
    Posts
    90
    Here's a good site to convert from pixels to ems : http://pxtoem.com/

  8. #8
    Join Date
    May 2014
    Posts
    893
    Quote Originally Posted by Strider64 View Post
    Here's a good site to convert from pixels to ems : http://pxtoem.com/
    Too bad that relationship -- and therin the site itself -- is 100% grade A farm fresh horse manure.

    Sure, some people might have 16px == 1em, but on this laptop it's 20px, on my TV it's set to 32px, on my workstation with the 2560x1440 27" display it's 24px to the EM.

    There is no fixed relationship, and treating it as a fixed relationship is outright ignorant nonsense.

    Same for PT; on this machine in FF 12pt == 20px, not 16.

    Lands sake the fact the relationship is not fixed is WHY the WCAG says to use EM in the first place! So everything auto-adjusts to user preferences.
    Last edited by deathshadow; 08-04-2014 at 06:27 PM. Reason: wrong smiley
    Java is to JavaScript as Ham is to Hamburger.

  9. #9
    Join Date
    Aug 2014
    Posts
    3
    Quote Originally Posted by jedaisoul View Post
    The idea of responsive design is to accommodate device widths down to, say, 320px wide. And generally with a number of cut-off widths on the way. How is one media query set at 1620px going to achieve that?
    Cut off widths meaning? I am very new to responsive design.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,493
    Quote Originally Posted by Magically View Post
    Cut off widths meaning? I am very new to responsive design.
    I mean widths at which a different media statement takes over. E.g.:

    CSS
    Code:
    @media (min-width: 800px) {
    /* settings for windows 800px and wider */
    }
    
    @media (max-width:799px) {
    /* settings for windows 640px to 799px */
    }
    
    @media (max-width:639px) {
    /* settings here for windows up to 639px */
    }
    
    @media (max-device-width:639px) {
    /* settings here for SCREENS up to 639px */
    )
    This allows separate settings for:
    - Windows 800px and wider.
    - Windows 640px to 799px wide.
    - Windows up to 639px wide.
    - SCREENS up to 639px wide.

    Note the difference between "max-width" and "max-device-width".
    Last edited by jedaisoul; 08-05-2014 at 03:42 AM.

  11. #11
    Join Date
    May 2014
    Posts
    893
    @jedaisoul, max-device-width is still window width, that's not what it means. It means don't lie about the width, which is why you'll see this META a lot:

    Code:
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    So that mobile browsers don't lie about the browser window area.

    You can test that with a max-height media query, you'll find it subtracts the address bar and any other stuff from it, which can at the right height on both Android and iOS result in a layout that constantly jumps between two layouts since when you scroll they typically hide the address bar triggering the query, which makes enough room to un-trigger the query endlessly.

    Basically "device-width" is the physical resolution of the window, "width" is the resolution the browser feels like reporting -- which is why a LOT of 480px wide screens will without that meta report "width" as 800px. It's why a lot of 1920px or higher screens (like Apple retina) will lie about "width" and report half their actual resolution -- hence the META above to tell them to "STOP DOING THAT, WE KNOW WHAT WE'RE DOING!"

    They do this because most websites are NOT designed for mobile, so they try to mash crappy designs into working... which... doesn't really work.
    Java is to JavaScript as Ham is to Hamburger.

  12. #12
    Join Date
    May 2014
    Posts
    893
    Oh, and a real laugh, some mobile browsers when 'lying' about width will try and figure out what the widest fixed element in the layout is, and use that as the "width" reported for media queries and "100%/auto" on top level elements. THAT can drive you nutters if you don't have the meta to tell them to not do that.
    Java is to JavaScript as Ham is to Hamburger.

  13. #13
    Join Date
    May 2014
    Posts
    893
    Oops, wrong thread. nevermind.
    Java is to JavaScript as Ham is to Hamburger.

  14. #14
    Join Date
    Mar 2012
    Posts
    1,493
    @ deathshadow

    I quote MDN:
    device-width

    Value: <length>
    Media: visual, tactile
    Accepts min/max prefixes: yes

    Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

  15. #15
    Join Date
    May 2014
    Posts
    893
    Funny since that's not even close to what it does in the wild... at all.

    Though that could be like EM being the width of a capitol M (it isn't) or EX being the x-height (it isn't)... What it's SUPPOSED to be, not what it is.

    Would be painfully bad if it actually did that -- unless what it does in MEDIA isn't what it does on the viewport meta.

    It's implementation issues like this that combined with the legalese makes me think the older the spec gets, the more inconsistencies like this seem to be in it.
    Last edited by deathshadow; 08-07-2014 at 04:23 PM.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles