homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Mobile Width-based Query
webfoo




msg:4588557
 6:01 pm on Jun 28, 2013 (gmt 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?

 

Paul_o_b




msg:4588574
 7:19 pm on Jun 28, 2013 (gmt 0)

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);


webfoo




msg:4589213
 1:18 pm on Jul 1, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved