@media queries

  • Resolved mium

    (@mium)


    11 years ago

    I am trying to figure out how to best incorporate @media queries into my CSS. I was going to determine my own breakpoints by resizing the browser to see at which points my problems occur. I have established that this would require more breakpoints than I expected. I am now rethinking and wondering what the best practice (and best strategy) for this would be.
    1. Is it safer to use the same breakpoints as the parent theme uses and modify my CSS accordingly or to create my own breakpoints?
    2. If parent is best, I am having trouble establishing the best order. Keeping in mind the cascading nature of CSS, I set out to go from smallest width to largest but am confused how to do it since some are min-width, some are max-width and some have both.

    THANKS in advance for any advice.

    These are the media queries I found in the PARENT CSS in this order (I realize some are duplicates):

    @media (min-width: 768px) and (max-width: 979px) {
    @media (max-width: 767px) {
    @media print {
    @media (min-width: 1200px) {
    @media (min-width: 768px) and (max-width: 979px) {
    @media (max-width: 767px) {
    @media (min-width: 480px) and (max-width: 767px) {
    @media (max-width: 480px) {
    @media (max-width: 979px) {
    @media (min-width: 980px) {
    @media (max-width: 1200px) {
    @media (max-width: 979px) {
    @media (max-width: 767px) {
    @media (max-width: 480px) {
    @media (max-width: 320px) {

Viewing 6 replies - 1 through 6 (of 6 total)
  • ElectricFeet

    (@electricfeet)

    Best to stick to the breakpoints currently established. Otherwise,at the overlaps you’ll be substituting two or more sets of CSS with one set of replacement CSS and things are bound to go wrong. Also, at the currently-set breakpoints other things happen: menus collapse, margins get wider, etc, so you need to match them really.

    Bootstrap 2.3.2 was built from the desktop down. So in terms of cascade, the desktop is the default. However, in terms of cascading, I don’t use order to define media queries. What I do instead (or try to!) is make sure that all possibly-conflicting CSS is mutually excluded by the media queries.

    So, for instance, if you have some CSS that needs to behave differently at 800px and 700px, say, then don’t use @media (max-width:979px) followed by @media (max-width:767px). Instead, use @media (min-width: 768px) and (max-width: 979px) and @media (max-width:767px) in any order you like. Anything else is just too much hassle to keep track of.

    ElectricFeet

    (@electricfeet)

    P.s. More info here: https://www.themesandco.com/snippet/media-queries-responsiveness/

    acub

    (@acub)

    Depending on what you need, these are all the possible media queries for Customizr:

    @media all and (min-width: 1200px) {}
@media all and (min-width: 980px) {}
@media all and (min-width: 768px) {}
@media all and (min-width: 481px) {}
@media all and (min-width: 321px) {}

@media all and (max-width: 1119px) {}
@media all and (min-width: 980px) and (max-width: 1119px) {}
@media all and (min-width: 768px) and (max-width: 1119px) {}
@media all and (min-width: 481px) and (max-width: 1119px) {}
@media all and (min-width: 321px) and (max-width: 1119px) {}

@media all and (max-width: 979px) {}
@media all and (min-width: 768px) and (max-width: 979px) {}
@media all and (min-width: 481px) and (max-width: 979px) {}
@media all and (min-width: 321px) and (max-width: 979px) {}

@media all and (max-width: 767px) {}
@media all and (min-width: 481px) and (max-width: 767px) {}
@media all and (min-width: 321px) and (max-width: 767px) {}

@media all and (max-width: 480px) {}
@media all and (min-width: 321px) and (max-width: 480px) {}

@media all and (max-width: 320px) {}

    This is also their correct order, by the way (as in, if you have selectors of the same strength in all queries they will work as expected).

    However, from my personal experience, one should not need more than 5 cases for any particular page layout. I’ve managed to build responsive tables with only 4 media queries.

    Thread Starter mium

    (@mium)

    Thanks Electric Feet and acub. The support on this forum is fabulous!

    Thread Starter mium

    (@mium)

    OK…I thought I was getting this but it turns out I’m still trying to wrap my head around it. For the changes I need, I am finding that my site changes at different breakpoints than the ones above. So, can I just code in the breakpoints that I am finding or should I try to match the ones above (prev posts in this thread) that are in the parent?
    Thanks!

    Ass I explained above, it’s better to match the theme’s breakpoints unless you want to do double testing of all the overlaps.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘@media queries’ is closed to new replies.