Break point best practice, Y/N

  • 1. Put all my break points and styles in one style sheet?

    2. In a specific break point, include only the styles I want to change?

    3. Does the (top to bottom) order of break points with related styles matter?

    4. Are styles with no break point assumed to apply at all screen sizes, unless over ridden?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    1. Yes, logically organized (and commmented).

    2. Yes.

    3. Yes, order matters.

    4. Yes.

    [moving topic to “everything else”.

    Thread Starter scorendesign

    (@scorendesign)

    Thanks.

    3. Yes, order matters.

    But this:

    @media only screen and ( min-width: 480px ) and ( max-width: 980px ) {
p {
font-size: 20px !important;
}
}
@media only screen and ( min-width: 0px ) and ( max-width: 479px ) {
p {
font-size: 16px;
}
}

    Has the same result as this, yes?

    @media only screen and ( min-width: 0px ) and ( max-width: 479px ) {
p {
font-size: 16px;
}
}
@media only screen and ( min-width: 480px ) and ( max-width: 980px ) {
p {
font-size: 20px !important;
}
}
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    !important throws a wrench into the works.

    Thread Starter scorendesign

    (@scorendesign)

    Ah, yes, sorry! Without !important, are these equivalent?

    @media only screen and ( min-width: 480px ) and ( max-width: 980px ) {
p {
font-size: 20px;
}
}
@media only screen and ( min-width: 0px ) and ( max-width: 479px ) {
p {
font-size: 16px;
}
}
    @media only screen and ( min-width: 0px ) and ( max-width: 479px ) {
p {
font-size: 16px;
}
}
@media only screen and ( min-width: 480px ) and ( max-width: 980px ) {
p {
font-size: 20px;
}
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Break point best practice, Y/N’ is closed to new replies.