csswizardry
palm doesn't override portable
is this intentional? this way those breakpoints without max/min defined are kinda dangerous to use
The portable rules is written after the palm rules, so given that they have equal weighting, the rule later in the css overrides.
Yea I know the reason, I just wonder whether is it intentional and what was the reasoning behind it..
On the other hand, I suppose that I should not even use portable when I want different widths for palm and lap.. but the thing is, I've added two more breakpoints(which, I think is, not something that you should be discouraged to do), both inside the "portable" category, so I do want them to have portable style, but the latest breakpoint in portable category is palm, which I want different, but have no way of overriding it.
Bump. Having this problem too.
Trying to do:
<div class="grid__item one-sixth portable-one-half palm-one-whole"> but portable always wins over palm due to order of inclusion.
for anyone coming to this late...
portable includes palm & lap
it can be slightly confusing at first and you need to not think of lap as "laptop" either. it's a lap device.
@if $media-query == portable{
@media only screen and (max-width:$lap-end) { @content; }
}
what i find missing is a name for 768-1024 as I find that my portrait tablet designs need to look a bit different to larger phones
i ended up hacking in a "tablet" class. it works for me for now
@media only screen and (min-width: $tablet-start) and (max-width:$lap-end) { @content; }
@jmp909 I think this is a nuanced problem that is a lot to do with approach.
I was trying to reduce the number of MQs I needed to use and wanted to say "this should be 1/2 on all portable devices, except on palm. This is especially useful when you have more than 2 portable MQs (like you're suggesting, a portrait tablet isn't catered for well in the defaults).
I ended up getting round my problem by reversing the order of the MQs (as suggested by @techytuppers)
However, I think the main reason it is how it is, is that you should be explicit, not implicit, with MQ breakpoints. use lap and palm if you want to have different rules, not portable and palm.
I keep finding I want to go back to the approach of "elegance" (which was always my way before learning BEM, etc) and this is a problem that comes from that approach. Better juts to add the explicit classes and move on than try to cascade elegantly.
Been looking for a day for this, documentation is not really explaining this, so thanks for pointing out here!
