Media query not found in my style section

Question

Do I have to add some link or file to get media queries to work. When I try to use a media query inline in a .cshtml file I get a red line under '@media' that says "cannot resolve symbol media". This is in a asp.net mvc project. When I move the media query to it's own .css file it works fine. Are media queries not allowed inline in a asp mvc project?

please give us total codes not one incomplete image. [html,css] — A1Gard, Aug 25 '15 at 05:37
What browser are you even using? _What_ says “cannot resolve symbol `media`”? — Sebastian Simon, Aug 25 '15 at 05:38
IE 11. Yes when I hover over '@media' it says 'cannot resolve symbol', do I need to add a reference or something to use media queries?? — chuckd, Aug 25 '15 at 05:39
possible duplicate of [@media media query and ASP.NET MVC razor syntax clash](http://stackoverflow.com/questions/7027469/media-media-query-and-asp-net-mvc-razor-syntax-clash) — , Aug 25 '15 at 06:41

score 4 · Answer 1 · answered Aug 25 '15 at 20:54

4

Here is what solved it.

 @@media only screen and (max-width:768px) {
   /* only size 'xs' and below */
   .searchResults {
     height: 100%;
   }

I added two @ symbols.

answered Aug 25 '15 at 20:54

chuckd

13,460
29
152
331

score 0 · Answer 2 · edited Aug 25 '15 at 07:33

0

What you have done is that you not specified the media rule

your code should be something like

@media screen and (max-width: 300px) { ... }

Edited:

At the top of your webpage add this line of the code in the <head> tag

<meta name="viewport" content="width=device-width, scale=1.0" />

Then in the style defination:

@media screen and (max-width: 768px) { 
.searchFilter {
 height:100%;
              }
     }

edited Aug 25 '15 at 07:33

tushar dhingra

3
4

answered Aug 25 '15 at 05:34

Sourabh Kumar Sharma

2,864
3
25
33

NO! maybe I didn't explain my question correctly. VS can't find this symbol? SO when I run it in IE I get this error message The name 'media' does not exist in the current context – chuckd Aug 25 '15 at 05:42
Oh that seems to be browser specific error, it runs fine in other browsers right? – Sourabh Kumar Sharma Aug 25 '15 at 05:43
I currently have "" in my head tag – chuckd Aug 25 '15 at 05:43
does this code run fine in other browsers except IE? – Sourabh Kumar Sharma Aug 25 '15 at 05:44
No, this isn't a browser specific error. This error is coming from the IIS, not the browser. And no, it doesn't work in any other browsers. – chuckd Aug 25 '15 at 05:45
can you post your full code so that i can debug it? And does that error come on your console of the browser? Also make sure that you write the code before you include other plugins like bootstrap in your code – Sourabh Kumar Sharma Aug 25 '15 at 05:46
one thing I just noticed is that the media query doesn't throw any errors when I have it in a .css file. If I put it inline with my html in the styles section tag like shown above it doesn't like it. When you say full code, which parts do you want? the html and css page? – chuckd Aug 25 '15 at 05:58
The full code of the screenshot that you have put in the question. Check if you have defined the ` – Sourabh Kumar Sharma Aug 25 '15 at 06:02
I'll post a solution below. It might not be the correct one but it's how I got it to work. I put the media query into a .css file – chuckd Aug 25 '15 at 06:11

score 0 · Answer 3 · answered Aug 25 '15 at 06:12

I got it to work by putting the media query into a .css file. When it was inline in the .cshtml file it didn't work. Code below

<style> 
html,body,.container-fluid,.row {
  height: 100%;
}
.row > div {
  height: 100%;
}
.row .col-md-5 {
  background-color: #eee;
  top: 51px;
  /*border: 1px solid black;*/
  height: calc(100% - 51px);
  padding-left: 0;
  padding-right: 0;
}
.row .col-md-7 {
  background-color: #ddd;
  top: 51px;
  /*border: 1px solid black;*/
  height: calc(100% - 51px);
  padding-left: 0;
  padding-right: 0;
}
#googleResultMap {
  width: 100%;
  height: 100%;
  /*border: 1px solid black;*/
}
.searchFilter {
  /*width:200px;*/
  height: 20%;
  border: 1px solid blue;
}
.searchResults {
  height: 80%;
  border: 1px solid green;
  overflow-y: scroll
}
input[readonly].default-cursor {
  cursor: default;
}
@media only screen and (max-width : 768px) { // does not work
/* only size 'xs' and below */
.searchResults {
    height: 100%;
}
}
</style> 
<link href="~/Content/MediaQueries.css" rel="stylesheet" /> //works

Media query not found in my style section

3 Answers3