How do I define multiple media queries in one file?
I have this .styl-file:
#media (min-width: 980px)
body
padding-top 60px
#media (min-width: 768px)
body
.container
width 768px
This is giving me the error expected "indent", got "newline". Placing them in separate files and having one file include the other works. But when I have them in the same file and a second file that is importing this one it fails.
Update: The code of the files can be found here:
https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/style.styl
https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/nblog.styl
Your problem is that you have tabs in the top query, and spaces in the lower. Try to be consistent (this is a good practice in general, when it comes to all kinds of programming). I don't have a preference either way, but you should probably look into your editor settings to see if you can enforce consistency on that level. My editor puts 4 or 2 spaces when I press tab, depending on language.
Your example in the question works, actually (there's only spaces in that one).
Related
I was trying different solutions to use #media in css (or to be more precise, sass) and was thinking about the way we commonly use #media. The most common way, at least that I know and I see on blog posts, tutorials, etc.. Is to define some standard values and then we use them. For example:
$small: 420px;
$medium: 768px;
$large: 992px;
$extra-large: 1200px;
#media screen and (min-width: $medium) { ... }
#media screen and (min-width: $large) { ... }
The problem I'm facing with this approach is that my menu doesn't fit well any of the predefined values. So when it break the media size, it gets a huge blank space, even thought there is still space to fit the menu. In this case I could break it at 780px but the values are 768 or 992.
So my question is.. Is it okay to approach media queries this way and break the media based on content by defining the values manually?
The menu would be 780px, let's say that a grid that I display the company members would break at 820px and 540px. Each of them I would need to analyse it visually on the browser, measure and set the value manually.
I would still use (if there's not a better way) the pre defined values for common elements on the page (if needed). There is this article that I like a lot (a little out of date but a good concept), it covers the screen size usage and how to group them. But it doesn't approach the issue I'm questioning here.
Also, other big companies, like Airbnb, Spotify, Github they use predefined values to break the #media content. All based on predefined values, not the content. Spotify is one example. The menu breaks too soon, even with enough space to keep the items before moving to aside off screen.
--
The only reason I can think of to keep using this method is because we, as end users, are so used to have a menu toggle on the top header that it doesn't matter if there is enough space to keep the inline text. Since we are used to the button to open the menu, we use this technique, hence the use of pre defined media values.
I'm building a CakePHP application that involves forms, and I'm looking for a way to remove the asterisk from required fields. I have several input fields that are required, but I do not want the asterisk to show.
I've tried using 'required'=>false, but that makes the field optional as well as removing the asterisk. I just want to remove the asterisk; the field needs to remain required.
You could modify the css that adds that. I've made changes in my css, so I'm not sure if it's the one that comes out of the box anymore (for that matter, I don't know if you are using the one that comes out of the box), but the css that adds those asterisk(s?) on my form is
label.required:after {
color: #EE3322;
content: "*";
display: inline;
}
And you should just replace that content:"*" with
content: "";
Now, if your css isn't the same as mine, inspect the label element, and look for a similar line (it's probably using a content: "*", so you know what you have to look for).
If you want to delete the asterisks for a single view, add an inline style in the view. If it is for the whole application, delete the line in the css file.
I got galaxy nexus with resolution is 720x1280. But when I call $(window).width() it just return 360px. Are there anyway to calculate value of $(window).width() on other devices? For an example, galaxy s 480x800? I need those values for my media queries:
#media only screen and (min-width: 360px){
body{
font-size: 62.5%;
}
}
I don't know if you're going to like my answer.. but here goes.
Forget about width (fixed widths at least), and make your website device-agnostic. Don't base your breakpoints on popular device resolutions, instead base them on your content. Keep stretching that browser window until you get that gut feeling that says "that doesn't look right" - that's your next breakpoint.
Keep it as fluid as you can and rely on relative units - even on your media query declaration.
I suggest giving this article by Chris Armstrong a read: http://www.alistapart.com/articles/the-infinite-grid/ (although ALA appears to be temporarily offline)
what would it take to allow media queries through HTMLPurifier + CSStidy?
In other words, I am using these libraries:
require_once 'inc_php_classes/htmlpurifier-4_4_0/library/HTMLPurifier.auto.php';
require_once 'inc_php_classes/csstidy-1_3/class.csstidy.php';
...to sanitize admin-user input before I save it to database.. for populating an external style sheet ... and so it happens that any input media queries are getting munged.. e.g. this:
#media only screen and (min-width: 600px) and (max-width: 939px) {
becomes
#media only screen and min-width 600px and max-width 939px {
..which breaks the media query, at least in Chrome 18/Mac.
The form/input is used for creating custom style sheets for trusted admin users.. and they need media queries.. but even though they are trusted, I do not want to just drop use of CSStidy.. because of the off chance an admin goes AWOL, not to mention I want to clean their newbie CSS errors.
Not sure, it's definitely not supported by vanilla HTML Purifier. It is reasonably plausible that CSSTidy does parse media selectors properly, so it's just a matter of teaching HTML Purifire not to strip them out.
I have a Stylish script on Firefox that moves the Search button on Starting Page, but the problem is that it will move the Search button on other pages, as well.
The lines
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
OR
#-moz-document domain("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
do not work. The Search button will move on any page that has it.
Any ideas to make it site-specific?
Here’s the script:
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query="){
}
input[value="Search"] /*isolates button*/
{
position: absolute;
top: 311px;
left: 660px;
}
Firefox 3.6.14, Win 2K
General answer:
That first line (#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")) should work. Does it only fail because other pages are also affected or does it fail because it never fires?
Anyway, things to check:
Was the opening brace omitted? Usually those lines are like:
#-moz-document url("http://www.google.com/hl=en&q=foo&aq=f") {
Note the brace at the end (But editing for the brace on the next line is fine, too.
Are the next pages, after the Starting Page, being loaded in by AJAX? For example, Google does this. You will notice that after entering a search term, the entire page does NOT reload.
If this is the case, then Stylish will still have the overwritten styles in effect; there is no help for it in Stylish.
So, confirm the problem with your first line. It would also be good to include exact links to the target pages and the full script.
If it is an AJAX issue, then you can easily convert the Stylish script to a Greasemonkey script -- which can, with a little logic, apply styles correctly, even on Ajaxified pages. (If that is the case: mark this question answered and open a new question, providing the full Stylish script and the desired results.)
Specific Answer, based on new information from the OP:
Based on the script provided, the error is that the braces are mispositioned. Also, you should provide a namespace.
So replace the script text with:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
{
input[value="Search"] /*isolates button*/
{
position: absolute;
top: 311px;
left: 660px;
}
}
#-moz-document url-prefix("http://startingpage.com/eng")
or
#-moz-document domain(startingpage.com)