Hello,

 

I have created a test page and two style sheets (body background is red for screen and blue for handheld)

 

This doesnt work on either my windows 7 phone or iphone (shows as red which is the background i set for non mobile devices)

 

http://www.treendsolutions.co.uk/test/testtwo.htm

 

These are the tags I used, please view source on the test pages for html

<link rel="stylesheet" type="text/css" href="screen.css" media="Screen"  />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"  />

 

Thank you for any help

 

Darren

Edited February 15, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Modern mobile browsers don't respect the handheld media attribute because they're designed to display desktop sites. Use media queries to switch between styles instead.

Modern mobile browsers don't respect the handheld media attribute because they're designed to display desktop sites. Use media queries to switch between styles instead.

 

 

Thank you, just reading up on Media Queries at the moment, just tried the following in my style though and still no luck:

 

http://www.treendsolutions.co.uk/test/testtwo.htm

(update to css below):

 

@media only screen and (max-width:500px)

{

background-color:green;

}

Wait, try this

 

@media only screen and (max-width: 500px) {

Edited February 15, 201214 yr by brightonmike

Wait, try this

 

@media only screen and (max-width: 500px) {

 

 

Sorry, i cant see what the difference in your code and mine (other than the space between "width:" and "500px", which i have updated but still no luck : )

I just checked your code. You're not actually telling the CSS to apply the green to the body.

 

body
{
background-color:red;
}


@media only screen and (max-width: 500px)
{
background-color:green;
}

 

You just have "background-color:green".

 

You need to specify the body selector inside the media query.

I just checked your code. You're not actually telling the CSS to apply the green to the body.

 

body
{
background-color:red;
}


@media only screen and (max-width: 500px)
{
background-color:green;
}

 

You just have "background-color:green".

 

You need to specify the body selector inside the media query.

 

 

lol, well spotted, i think i was looking at this for too long to realise that, however how do i set the body details within a media query (syntax please?)

 

thanks again

Exactly the same as you do normally. All you do is put the CSS you want applied by the media query inside of the query, as in inside it's curly brackets.

Exactly the same as you do normally. All you do is put the CSS you want applied by the media query inside of the query, as in inside it's curly brackets.

 

 

Thank you, that worked when reducing the screen size, however, my mobile still shows a red background (its windows 7 using internet explorer, could that be why?) will check on my wifes iphone shortly (she is on it at the moment)