Jump to content

CSS @media selector not working.


James_Purcell

Recommended Posts

Can someone tell me what I am doing wrong with the @media selector please?

so far I have 3 css files,

 

common.css works but the selector for 1024 (pc/laptops) and 420 for mobile phones.

 

420.css was working until I added 1024 but now the iphone, ipad and laptop just default to 1024.css.

 

Am I missing something important?

template2.html

Link to comment
Share on other sites

Your HTML is wrong.

Here's your code:

<link rel="stylesheet" media="screen" and "(max-width: 480px)" href="480.css" />
<link rel="stylesheet" media="screen" and "(min-width: 1024px)" href="1024.css" />

Here's what it should be:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="480.css" />
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="1024.css" />

I would recommend having your media queries in the main stylesheet using the @media rule so that the browser has to download fewer files.

  • Like 1
Link to comment
Share on other sites

Thanks, working now but shows a couple of bugs.
1, align: center; isn't working,

2, various layout bugs with device orientation.

Link to comment
Share on other sites

No such styling as 'align: center;' text-align: center; yes!

 

well that is why is doesn't work then.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...