Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@import styles not working in a media query

Tags:

I am trying to import a style based off a media query but the import is not being triggered If i put styles directly in the media query they are rendered to the page.

Here is a link to the live site http://update.techbasics.ca

Here is my style.css with the media queries and the imports

I am using wordpress if that helps debug.

@import url('base.css'); /****************************************************************** Site Name: Tech Basics Author: Anders Kitson  Stylesheet: Main Stylesheet  Here's where the magic happens. Here, you'll see we are calling in the separate media queries. The base mobile goes outside any query and is called at the beginning, after that we call the rest of the styles inside media queries. ******************************************************************/ * {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; }  /***************************************************************** BASE CSS *****************************************************************/  /***************************************************************** MEDIA QUERIES *****************************************************************/ @media only screen and (min-width: 480px) {     @import url('min480.css');   } @media only screen and (min-width: 600px) {      @import url('min600.css');   }  @media only screen and (min-width: 768px) {   body {     background: purple; } } @media only screen and (min-width: 992px) {   body {     background: orange; } } @media only screen and (min-width: 1382px) {   body {     background: url("../img/noisy_grid.png"); } } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {   @import url('base.css');  } 

and here is min600.css (located in the same directory as the style.css file)

header {   text-align: left; }   body{     background: green;   } 
like image 585
Cool Guy Yo Avatar asked Feb 18 '13 19:02

Cool Guy Yo


People also ask

Do media queries work with style tags?

Media queries work fine inside style tags and always have. They don't work in style attributes as only property/values are allowed in style attributes. You should avoid using the style attribute anyway unless you have a special case reason.

Can you use @import in CSS?

Definition and UsageThe @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.

What does CSS @import do?

The @import rule is used to import one style sheet into another style sheet. This rule also support media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration.


1 Answers

try that kind of code

@import url("/inc/Styles/full.css") (min-width: 940px); 
like image 192
Drew Altukhov Avatar answered Oct 05 '22 12:10

Drew Altukhov