Tell me what the correct nesting media queries. All media are written as min-width, but you need to add max-width for small screens, when adding at the very beginning and end, the media request for max-width: 320px does not work

@media (max-width: 320px) { .info-block4 { display: flex; flex-direction: column; margin-top: 50px; margin-bottom: 45px; z-index: 2; left: 10%; } .first::before { bottom: 81px; } .centr::before { bottom: 81px; } .last::before { bottom: 81px; } } @media (min-width: 576px) { .info-block4 { display: flex; flex-direction: column; margin-top: 50px; margin-bottom: 45px; z-index: 2; left: 10%; } } @media (min-width: 768px){}

and so on min-width: 900, 1200, 1900

  • add your code please - Mikhail Rebrov

2 answers 2

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

@ screen-xs-max, @ screen-sm-min and so on. variables from less, you can substitute your values ​​with "px" for example:

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

Start from the maximum of the small screen and end up with the minimum size of the large screen.

    You use the Mobile First technique, i.e. First, we write all the styles that small screens need, and some of the styles that will be used for all screens.
    Next, add step by step display for increasingly wide screens.
    There is also an inverse technique.
    The final choice of method depends on the difference between the required display - where more styles are needed - on smartphones or on desktop tablets.
    But more often such a choice is not made, but simply the maker-uper cram his proven template !!)))
    If to speak in the language of code, you have something like this:

     /* Custom, iPhone Retina */ @media only screen and (min-width : 320px){ } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px){ } /* Small Devices, Tablets */ @media only screen and (min-width : 768px){ } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px){ } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px){ }

    I apologize wildly, but I still don’t understand what you want, so I’ll assume that you need to prescribe a display for a specific range of screens, there is nothing easier !!))) Below is an example that you can insert right after the rule min-width: 320px

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