raja raja - 1 year ago 145
Scala Question

error while writing media query

I am using

in my project and i have some problem while writing a media query in my

Here is my code

@(mailContent: String)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mail template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
.img-brand {
margin-left:20px; width:40%; height:40%;
.date {
font-size:125%; color:#5d5d5d; float:right; margin-right:20px; margin-top:55px;
@media (max-width:480px){
.img-brand { margin-left:10px; width:90%; height:90%;}
.date { font-size:125%; color:#5d5d5d; float:right; margin-right:20px; margin-top:10px;}

If u see we are using
to create some variables so if i write some query like that media it is giving me the error

Can some one help me how to write a media query without using

I thought
media Query
is the only problem and it got resolved by adding
but now i found that
itself is not getting used or called.
So, can somebody help me on this.

Answer Source

You have to escape the @ character: it is used by Play templates. So when you write @media, Play tries to find a variable named media, which will probably fail. To escape use @@:

@(mailContent: String)
@@media (max-width:480px){
    // (...)

Note two things:

  • You won't have this problem if you place your code in a .css file apart and add a link in the html (Play wont process it)
  • Probably your IDE will complain that @@ is not valid CSS. After Play processes it @@media becomes @media, so you can just ignore it.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download