Media Queries effecting certain Elements and not others

Question

I am using media queries to edit certain elements of a website for mobile use. I know for definite that the media-specific stylesheet works, however particular elements don't seem to edit. Does anyone have any idea why this would happen? I have pasted the style start tag and also both versions of the element in question.

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/small-devices.css" type="text/css" />    

#home-content { /* small device stylesheet */
    position:absolute; width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

#home-content { /* regular stylesheet */
    position:absolute; width:30%;
    bottom:65px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

Any help would be great! Thanks guys.

prefer `max-width` over `max-device-width` for the reasons mentioned [here](http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width). — Michał Rybak, Jan 04 '14 at 14:33
Are you loading the mobile specific css after the regular stylesheet? — Raunak Kathuria, Jan 04 '14 at 14:36
@AlexanderO'Mara http://chefpaulcrowe.com I want the text box on the bottom left of the screen to take up the majority of the screen on mobile devices, however it is as if the element ignores the media-specific style sheet. — Liam David Hodnett, Jan 04 '14 at 14:37
@RaunakKathuria if you mean does the mobile specific style tag come before the regular style tag in my header, then no it is not, it is listed after. Thanks for the help guys, really appreciate it. — Liam David Hodnett, Jan 04 '14 at 14:39
@MichałRybak it isn't just the width that isn't effected by the media-specific style sheet, it is position, background colours etc. — Liam David Hodnett, Jan 04 '14 at 14:50

Alexander O'Mara · Accepted Answer · 2014-01-04T15:21:02.347

This is the order of the stylesheets in the head of your document:

<link rel="stylesheet" href="/small-devices.css" media="only screen and (max-device-width: 1000px)" type="text/css" />
<link rel="stylesheet" href="/wp-content/themes/twentythirteen/style.css" type="text/css">
<link rel='stylesheet' id='genericons-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/fonts/genericons.css?ver=2.09' type='text/css' media='all' />
<link rel='stylesheet' id='twentythirteen-style-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />

This will cause small-device.css to be overridden by any rules of equal or greater specificity. You should move small-devices.css to print lower in the header, or increase the specificity of the selectors. For example:

body #home-content { /*Some CSS*/ }

Will override:

#home-content { /*Some CSS*/ }

Regardless of the order.

Also, in your live example, you do not have a width set on #home-content.

In small-devices.css (http://chefpaulcrowe.com/small-devices.css), you have this code.

#home-content {
    position:absolute; max-device-width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:red;
}

This property:

max-device-width:700px;

Should be something like:

width:700px;

Thanks for your help! However it is not just the width that isn't being effected by the mobile-specific stylesheet, it is in fact all commands, i.e. background color, position, height, width padding etc, any idea on what might be causing this? — Liam David Hodnett, Jan 04 '14 at 15:02

Media Queries effecting certain Elements and not others

1 Answers1