Is it possible in Stylus to define a keyword/variable to be used instead of a long #media line-rule?
For instance:
IE = #media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm)
And then use it as
.div1
IE
color red
Yep, something like this:
IE = 'all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm)'
.div1
#media IE
color red
Related
I tested the email on desktop and phone, but this is what one of the receivers saw on their tablet. The fonts and td are in percents, so I'm not sure why it's doing that. Any idea why this would be happening?
The media query I'm currently using is:
#media screen and (max-width: 600px)
I'm thinking that using something like this might fix it:
#media (min-width: 768px) and (max-width: 1024px) {
I'm using Stylus CSS preprocessor and I'm trying to output this specific media query, which is a hack for IE8:
#media (min-width 481px), screen\0
however the above compiles to: #media (min-width 481px), screen 0 as the \ is used for escaping: http://learnboost.github.io/stylus/docs/escape.html - escaping the backslash didn't work either screen\\0
I've tried using the unquote() method in various ways without any luck, as it does not compile at all:
> 846| #media (min-width 481px), unquote('screen\0')
847| .social
848| max-width 401px
849| margin 0 auto
expected "(", got "function unquote"
or
> 846| unquote('#media (min-width 481px), screen\0')
847| .social
848| max-width 401px
849| margin 0 auto
expected ")", got "string '#media (min-width 481px), screen\0'"
How can I get Stylus to output that, correctly?
For now you can store the hack in a variable and then use it in the media query like this:
$ie8mediahack = 'screen\0'
#media (min-width 481px), $ie8mediahack
.social
max-width 401px
margin 0 auto
This would also make it self-commented and not look like an actual hack :)
I'm having a problem. I don't know why the Stylus isn't compiling the min-width properly when I'm using the media queries. For example:
#media screen and (min-width: 1400px)
is compiling:
#media screen and (undefined: 1400px)
but when I change from min to max, it works:
#media screen and (max-width: 1400px)
is compiling:
#media screen and (max-width: 1400px)
Anyone can help me?
I'm guess, that you have variable with same name (min-width). If you remove or rename it, all would be fine.
I have this less and I can't figure out how to do the math inside the string
#bp-tablet-landscape: 1024px;
#bp-tablet-portrait : 768px;
#tablet-landscape-only: ~"only screen and
(min-width:#{bp-tablet-portrait} + 1) and (max-width: #{bp-tablet-landscape})";
Usage
div#header {
#media #tablet-landscape-only {
background: #000;
}
}
But it doesn't quite compile correctly. It doesn't add 768px + 1 as I had hoped. Any ideas? I've tried several different flavors and I can't nail it. I can obviously define a variable outside the string concat, but I'd like to avoid that approach if possible.
winLess online compiler outputs
#media only screen and (min-width:768px + 1) and (max-width: 1024px) {
div#header {
background: #000;
}
}
I want to get 769px in there instead of 768px + 1
Not Within the String Itself, but...
If you separate it out of the string, then do a second interpolation following (note the 2nd ~), this works:
#tablet-landscape-only: ~"only screen and (min-width: "(#bp-tablet-portrait + 1) ~") and (max-width: #{bp-tablet-landscape})";
To produce this:
#media only screen and (min-width: 769px ) and (max-width: 1024px) {
div#header {
background: #000;
}
}
I am doing a project using the new updated Bootstrap 3 RC1.
There are may new features with the new Bootstrap 3 which are much different than the previous versions.
I figured most of the changes but one I can't resolve:
when the menu has many items it breaks in Ipad and other tablets becuase it doesnt get collapsed like it automatically collapsed on mobile (which is good)
I would like to know how do I "force" ipads to act like mobile and show a collapsed menu or better yet - how to collapse the menu if it has many items and on certain screens and smaller it breaks
here are screenshots of my live project:
-- Menu on Big Screens --
-- Menu on Ipad Landscape --
-- Menu on Ipad Portrait --
-- Menu on Mobile --
I simply want the ipad to act like mobile. notice that the portrait does act like mobile as far as the content but not the menu.
Please read: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/
The collapsing of your menu is defined in the less files. (Download the latest version from:https://github.com/twbs/bootstrap )
In variables.less you will find #grid-float-breakpoint: #screen-tablet; where #screen-tablet is 768px.
So by default your menu will collapse when the screen width is below the 768px;
The ipad landscape has a screen width of 1024px so the menu will NOT collapse. The ipad portrait screen width is 768 px so the menu will NOT collapse.
See also navbar.less:
// Responsive navbar
// --------------------------------------------------
#media screen and (min-width: #grid-float-breakpoint) {
To change this behavior you have to change the #grid-float-breakpoint b.e set to 767 and recompile your css files.
NB You also mentioned: "notice that the portrait does act like mobile as far as the content but not the menu."
You use "col-lg-" as prefix for your grid rows. "col-lg-" elements will stack below the 992px (ipad portrait) and become horizontal above 992px (ipad landscape).
Just ran into this issue as well. I suggest you visit:
Bootstrap customization
Find the field #grid-float-breakpoint and set it to the screen width after which menu should collapse. There you could use variables from previous section, namely from Media queries breakpoints to set proper points.
Also, take a moment and check through all available variables to change. Creating a well-customized Bootstrap package might save you hours of dev. work, if not more.
For those poor souls who are not using less, you would have to modify the bootstrap.css and change media queries associated with navbar that have a breakpoint of 768px to 992 px.
For example, change
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
to:
#media (min-width: 992px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
The no less implementations I found didnt work
Couldn't find the styles to make this happen on its own anywhere, ended up finding this - https://coderwall.com/p/wpjw4w
I was able to correct our issue by changing the #media (max-width: 768px) query to 767px instead. One of the links above referenced a 1px issue on iPad which breaks differently and was forcing the mobile version of the website instead.
If anyone is using the standard bootstrap.css file, I had to change it in 3 places:
around line 3780
/*changed from 768 to 992 */
#media (min-width: 992px) {
.navbar-header {
float: left;
}
}
around line 3799
/* changed from 768 to 992 */
#media (min-width: 992px) {
around line 3924
/*changed from 768 to 992 */
#media (min-width: 992px) {
I hope this helps someone :)
I had the opposite problem. On iPad the navbar was not collapsed (as expected), but the styles for a collapsed navbar were applied. I got it solved by changing the media query for the collapsed navbar adding -1 to match with $grid-float-breakpoint as follows:
#media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}