Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Mobile Width-based Query

     
6:01 pm on Jun 28, 2013 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


Hello,

I have "master.css" as follows:

@import url("folder/file.css");
@import url("file2.css");
@import url("jquery-ui.css");
@import url("anotherfile.css");
@import url("file5.css");
@media screen and (max-width : 640px) {
@import url("mobile.css");
}


So theoretically, mobile.css should be applied if the user's screen width is small. But no matter what device I use, I can never get the browser to activate mobile.css. If I remove the @media query, mobile.css is imported properly and works. What am I doing wrong?
7:19 pm on June 28, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4


HI,

Your syntax is invalid as @import should precede all rule sets in a style sheet. The correct way to import with a media query is as follows:


@import url(mobile.css) screen and (max-width:640px);

1:18 pm on July 1, 2013 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


Thank you! I had never really worked with @import or max-width before in this type of context.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members