[css-d] Placement of MQ question
List,
I'm working on a project that has large photo headers on each section
of a long scrolling page. Each header has - as you would expect -
related copy under it in a main section.
Client is requesting that more copy appear on screen with it's related
header, so I am thinking I'll institute an MQ related to viewport
height like:
@media screen and (max-height: 1024px){
header{height: $shorter-height;}
}
My question is what is the proper place to put this? After all my
other MQs? In with my styles near where the taller height is
specified? Does it matter?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Placement of MQ question
Hi Tom,
Without knowing how you have your styles structured, I can really only
guess at how I would do it.
I use partials like crazy so the way I would do it may not make sense in
your project, but I would put that in _header.scss (or maybe it would call
it _main--header.scss in this case).
If you have clear separation between your media query styles and
mobile-first styles (assuming that's how you've written it), I would just
drop that as another media query at the end of my media query code.
Does it matter?
In my opinion, yes. If requirements change in the future and there is no
adherence to structure, you'll end up with some messiness down the road (I
feel like I'm preaching to the choir on this point though :D, maybe I've
misunderstood the question).
Hope that helps.
Chris Rockwell
On Mon, Jul 28, 2014 at 1:23 PM, Tom Livingston tom...@gmail.com wrote:
List,
I'm working on a project that has large photo headers on each section
of a long scrolling page. Each header has - as you would expect -
related copy under it in a main section.
Client is requesting that more copy appear on screen with it's related
header, so I am thinking I'll institute an MQ related to viewport
height like:
@media screen and (max-height: 1024px){
header{height: $shorter-height;}
}
My question is what is the proper place to put this? After all my
other MQs? In with my styles near where the taller height is
specified? Does it matter?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Placement of MQ question
On Mon, Jul 28, 2014 at 1:42 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Hi Tom,
Without knowing how you have your styles structured, I can really only guess
at how I would do it.
I use partials like crazy so the way I would do it may not make sense in
your project, but I would put that in _header.scss (or maybe it would call
it _main--header.scss in this case).
If you have clear separation between your media query styles and
mobile-first styles (assuming that's how you've written it), I would just
drop that as another media query at the end of my media query code.
Does it matter?
In my opinion, yes. If requirements change in the future and there is no
adherence to structure, you'll end up with some messiness down the road (I
feel like I'm preaching to the choir on this point though :D, maybe I've
misunderstood the question).
Hope that helps.
Chris Rockwell
I use sass, and my main sheet is imports:
@import base;
@media only screen and (min-width: 30em) {
@import 480;
}
@media only screen and (min-width: 37em) {
@import 600;
}
@media only screen and (min-width: 48em) {
@import 768;
}
@media only screen and (min-width: 60em) {
@import 960;
}
I've done both where I've added at the end of this, and put tweaky MQs
in individual sheets. Just wondering if one place is better than the
other.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Placement of MQ question
On Mon, Jul 28, 2014 at 2:15 PM, Tom Livingston tom...@gmail.com wrote:
On Mon, Jul 28, 2014 at 1:42 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
Hi Tom,
Without knowing how you have your styles structured, I can really only guess
at how I would do it.
I use partials like crazy so the way I would do it may not make sense in
your project, but I would put that in _header.scss (or maybe it would call
it _main--header.scss in this case).
If you have clear separation between your media query styles and
mobile-first styles (assuming that's how you've written it), I would just
drop that as another media query at the end of my media query code.
Does it matter?
In my opinion, yes. If requirements change in the future and there is no
adherence to structure, you'll end up with some messiness down the road (I
feel like I'm preaching to the choir on this point though :D, maybe I've
misunderstood the question).
Hope that helps.
Chris Rockwell
I use sass, and my main sheet is imports:
@import base;
@media only screen and (min-width: 30em) {
@import 480;
}
@media only screen and (min-width: 37em) {
@import 600;
}
@media only screen and (min-width: 48em) {
@import 768;
}
@media only screen and (min-width: 60em) {
@import 960;
}
I've done both where I've added at the end of this, and put tweaky MQs
in individual sheets. Just wondering if one place is better than the
other.
I'm leaning towards adding it to the end of this. Seems most logical,
but then again... I'm not always the sharpest knife in the drawer.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Placement of MQ question
I would add it to the end of the main sheet and import the partial in this
scenario.
Chris Rockwell
On Mon, Jul 28, 2014 at 2:33 PM, Tom Livingston tom...@gmail.com wrote:
On Mon, Jul 28, 2014 at 2:15 PM, Tom Livingston tom...@gmail.com wrote:
On Mon, Jul 28, 2014 at 1:42 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
Hi Tom,
Without knowing how you have your styles structured, I can really only
guess
at how I would do it.
I use partials like crazy so the way I would do it may not make sense in
your project, but I would put that in _header.scss (or maybe it would
call
it _main--header.scss in this case).
If you have clear separation between your media query styles and
mobile-first styles (assuming that's how you've written it), I would
just
drop that as another media query at the end of my media query code.
Does it matter?
In my opinion, yes. If requirements change in the future and there is
no
adherence to structure, you'll end up with some messiness down the road
(I
feel like I'm preaching to the choir on this point though :D, maybe I've
misunderstood the question).
Hope that helps.
Chris Rockwell
I use sass, and my main sheet is imports:
@import base;
@media only screen and (min-width: 30em) {
@import 480;
}
@media only screen and (min-width: 37em) {
@import 600;
}
@media only screen and (min-width: 48em) {
@import 768;
}
@media only screen and (min-width: 60em) {
@import 960;
}
I've done both where I've added at the end of this, and put tweaky MQs
in individual sheets. Just wondering if one place is better than the
other.
I'm leaning towards adding it to the end of this. Seems most logical,
but then again... I'm not always the sharpest knife in the drawer.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
