raja raja - 4 months ago 17
Scala Question

error while writing media query

I am using

Scala
and
playFramework
in my project and i have some problem while writing a media query in my
html
page.

Here is my code

@(mailContent: String)
<html>
<head>
<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"/>
<style>
.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;}
}
</style>
</head>


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
style
itself is not getting used or called.
So, can somebody help me on this.

Answer

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)
<p>Hi</p>
<style>
@@media (max-width:480px){
    // (...)
}
</style>

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.