I've got a large site that runs in ASP.NET MVC using the Razor view engine.
I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head> of the page - usually this is one or 2 lines.
I don't particularly like putting the CSS in <head> as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.
I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the # symbol and brackets {} it's clashing with the razor syntax:
#section cphPageHead{
<style>
/* PAGE SPECIFIC CSS */
...
#media only screen and (max-width : 960px) <-- the # symbol here is clashing!
{
... }
}
</style>
}
Is there a way I can get around this?
use double ## symbols. That will escape # symbol and render #media correctly on client side
Also remember to add a space after double ##:
## media only screen and (max-width : 960px)
##media with no space did not work for me.
I realize this is old question, but this is the only solution that worked for me:
#section cphPageHead{
<style type="text/css" media="screen and (max-width:959px)">
</style>
<style type="text/css" media="screen and (min-width:960px)">
</style>
}
Related
I need to build a responsive email template. I did my research and learnt that media queries are not widely supported by the email clients.
So, I tried not to use media query and stacked the columns using display: inline-block; max-width:290px;.
But what if I want to change the font size for mobile version? Also I have a case where client wants few blocks to be visible in mobile but not on desktop. How can I achieve these without media query?
Also, in my case when I add style rules and media queries, I guess iOS supports media queries. But rues under media queries are not appearing but the other rules defines in <style></style> works just fine.
The template looks somewhat like this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
table {
font-size: 24px;
}
#tdtoshowinmobile {
display: none;
}
#media only screen and max-device-width(767px){
table {
font-size: 32px !important;
}
#tdtoshowinmobile {
display: block !important;
}
}
</style>
</head>
<body>
<table>
...tr...td....
</table>
</body>
The above template adds the normal rules to inline elements but removes the media queries in my case. I read an article that says that mail clients remove style tags and add it to inline elements. And I guess since media queries can't be defined inline they are being ignored.
So, again my questions are:
how to change font-size or color etc in responsive email template without using media queries?
how to add media queries the right way?(For me adding them in style tag is not working)
1 Think it can be done only using media query.
Some popular mobile mail clients support media query, so in my opinion it's worth.
2 Hope this code can help you
#media screen and (max-device-width: 767px),
screen and (max-width: 767px) {
}
also, maybe use some doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you lookin for responsive email example with multiple columns please take a look at litmus or other free templates ( this one looks really good as example )
A css question about meta tags in head
<link rel="stylesheet"media="screen and <min width npx)" href="assets/stylesheets/large.css">
Does the code below still need to go in?
<link rel="stylesheet" href="large.css">
Do not use multiple stylesheets for responsive design. This just creates more HTTP requests which are not necessary. Read here for why
Instead, use media queries within your CSS file. Like so:
#media (min-width: 10em) and (max-width: 20em) {
/* responsive styles go here */
}
Read here for more on how to use these: http://css-tricks.com/logic-in-media-queries/
Media queries are a feature of the CSS language within a single stylesheet.
You do not need to change the <link> tag at all.
The <link media="..."> tag is only useful if you have an entire stylesheet of rules that should only be applied under a specific media query; this allows the browser to skip downloading the file if the media query doesn't match (saving bandwidth)
Is there a preference to where CSS media queries are defined? I.e. should I call them from my html like this:
<link rel="stylesheet" media="only screen and (min-width: 350px)" href="../assets/css/350.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="../assets/css/768.css" />
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="../assets/css/992.css" />
Or should I maintain one CSS file and define the media queries there?
Whatever works best for you, really.
Personally I prefer defining them inside my main CSS file, alongside the rules that they affect. For example:
#someElement {font-size:24pt;}
#media all and (min-width:350px) {
#someElement {font-size:12pt}
}
This keeps them close together so I don't lose track of them. It also means fewer HTTP requests.
Personally I would go for everything in a single file. You could (or should) manage the size and structure of your code by using a css preprocessor like less or sass. This way you can develop in multiple files, and combine / minimize them before you upload them to your webserver.
The main reason to use a single file is speed. Usually an extra request takes a lot longer then downloading a few extra kilobytes. It is also what is advised by the 'big ones' like Yahoo and Google...
I have a website already made. I want to make a mobile version of this. I basically want to import a table from the main site into the mobile site. I want to take the CSS code from the main site that covers the table and then input in my CSS file for the mobile site (I already put the HTML code into the mobile site). The problem is, when I do that it starts to overwrite the current CSS file and change the design.
Help please!!
You will need to use media queries. This is a css3 function.
In the top of your html, you need to put the following:
<meta name="viewport" content="width=device-width" />
Then, in your css, you will do something like this:
#media only screen and (max-width : 320px) {
/* Styles */
}
This is a reference site for commonly used media queries.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You will basically need to do this for each size device you are optimizing for.
Also, if you have several of these, you might end up with a very large css file.
That could impede download speed especially on a phone. In that case, create
separate smaller css files and use conditional statements in your html to specify
which css to call. In that case, you will need to use something like this in your html:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
I have a asp.net mvc application and my Views are in HTML5. I need to print a view as a report. This View shows some data with <table/> tag and it is formatted with css style as font-family, font-size, text-align properties etc. When I try to print it with Chrome (exporting to PDF) my css does not work, I mean, the print's result is shown without formating.
What can I do to solve this problem? It Does not matter whether I use css to apply the style or use html tags to format the page, but I wish it would leave the impression formatted.
PS: I would like to keep the html valid document.
You need to split up the css for screen and print separately just by following setting
<link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
then no need to change your html code just change the css or duplicate the old css.
You can use different styles for screen and print media in your style sheet, i.e.
#media screen
{
table.test {
font-family:"Times New Roman",Georgia;
font-size:10px;
// more
}
}
#media print
{
table.test {
font-family:Verdana, Arial;
font-size:10px;
// more
}
}
When you'll print the table only styles defined in print media will be applied.
Check this for more.
You can try to define the css semantics with #media print rule, then stylize the stylesheet with that in mind. Maybe this help.