Jump to content
James_Purcell

CSS @media selector not working.

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

 

well that is why is doesn't work then.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...