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.
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 have the following code snippet in my SCSS to modify the CSS according to device size.
.cu-list-project li{
#media (min-width: #screen-md-min) {
width: 60%;
#include project-list;
}
}
But Sass gives the following error:
*error styles/sass/styles.scss (Line 108: Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was
"#screen-md-min) {").
Apparently, "#screen-md-min" is not recognized by Sass. What should I do?
P.S: I know I can change #screen-md-min to 992px but this will not be a best practice. So, I'm looking for a real solution not a workaround. thanks.
Looking at the source code for the bootstrap-sass, you should use $screen-md-min e.g.
#media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
#include responsive-visibility('.visible-md');
}
From line 89 on Github
I'm using the standard bootstrap 3 media queries that use max-width, but also want to include some for smaller phones and tablets, but can't figure out how to get them both to work for their respective devices.
For example I know this will handle any most phones:
#media (max-width:767px)
But if I want to have a separate queries for say, iphone 5's like this
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
Either one or the other will work.
I've tried changing the order (as I know the later one will override the earlier one) and adding "!important" declarations, but nothing seems to work.
Int this particular instance I have series of links with a button below them and need to have the padding between them be smaller so they will all fit on a smaller screens (in this example an iPhone 5, but I'd like to have a 3rd one for iPhone 4 etc.), but not be to close together on the bigger one.
Is there an easy way to do this?
Thanks in advance for any help you can be.
Here's a rough example of what I tried for 3 different sizes.
/iPhone 4 and other small phones/
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.topic-link h5 {
padding-bottom:12px;
}
}
/iPhone 5 and other medium phones/
#media only screen and (min-device-width: 320px) and (max-device-width: 568px){
.topic-link h5 {
padding-bottom:18px;
}
}
/iPhone 6 and other large phones/
#media (max-width:767px){
.topic-link h5 {
padding-bottom:24px;
}
}
Here's attempt number 2:
/iPhone 4 and other small phones/
#media only screen and (min-width: 320px)and (max-width: 480px) {
/iPhone 5 and other medium phones/
#media only screen and (min-width: 320px) and (max-width: 568px) {
/iPhone 6 and other large phones/
#media only screen and (min-width: 375px) and (max-width: 667px) {
I would suggest either being more specific with your rules (for example your min-device-width for iPhone 5 could be larger than the previous max and so on.), or using min-width in the manner suggested by this answer. Perhaps give this a read as well in regards to using min-width vs min-device-width.
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 try to switch the display mode via javascript.
Assuming i have the html element with a class "display_mobile" i tried:
#media only screen and (max-width: 767px), html.display_mobile {
/* mobile mode definitions */
}
but this does not works.
Any idea how to solve this?
Like this. Media queries do not allow to use selectors in condition.
#media only screen and (max-width: 767px) {
html.display_mobile .any-definition {}
}