Hello. I have a post structure: 4 small and 2 large, and then 4 small, 1 large and 2 small. The fact is that I don’t know what to write to media queries at what screen resolutions. I do not understand what I need to reduce or increase.

At the resolution from 974 to 730, the layout breaks. I make up the template for myself. It did not include how and what should look like on 768, 480 and 320.

Until 768 , I cannot get 4 small, then 2 large, and then 4 small, 1 large and 2 small.

My curve code

.news { max-width: 980px; min-height: 500px; background-color: gray; display: flex; flex-wrap: wrap; justify-content: center; } .postSmall { flex-basis: 210px; height: 266px; background-color: #fff; display: inline-block; margin: 17px; } .postBig { flex-basis: 455px; height: 266px; background-color: #fff; display: inline-block; margin: 17px; } /* 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) {} 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="news"> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postBig"></div> <div class="postBig"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postBig"></div> <div class="postSmall"></div> <div class="postSmall"></div> </section>

And with 768 like this:

enter image description here

Tell me what to do? Here is the problem itself:

enter image description here

    2 answers 2

     div { box-sizing:border-box; } .news{ max-width: 980px; min-height: 500px; background-color: gray; display: flex; flex-wrap: wrap; justify-content: center; } .postSmall{ flex-basis: 50%; height: 266px; background-color: #fff; display: inline-block; border: 17px solid #ff00ff; } .postBig{ flex-basis: 100%; height: 266px; background-color: #fff; display: inline-block; border: 17px solid #ff00ff; } /* 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) { } 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="news"> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postBig"></div> <div class="postBig"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postBig"></div> <div class="postSmall"></div> <div class="postSmall"></div> </section>

      First, let's look at using media expressions. Depending on whether you use (max-width: --px) or (min-width: --px) get different directions for the properties you apply.

      (max-width: --px) :

      max-width

      For example, the @media (max-width: 766px) { ... } code @media (max-width: 766px) { ... } is used for a viewport width from 0 pixels to 766 pixels, which corresponds to the range 3 in the picture. T. o. you set the final limit for applying your properties.

      (min-width: --px) :

      min-width

      When using (min-width: --px) everything happens the opposite For example, the code @media (min-width: 1024px) { ... } will apply a range of 4 - from 1024 pixels to infinity.

      To make such rubber layouts, I recommend using the calc() function. You have 17 pixels of external indentation, which means you can set calc(25% - 34px) for small blocks, and for large calc(100% - 34px) .

      Your problem begins in the range of 1010 pixels and below, so for this section you can write the following code:

       @media only screen and (max-width: 1010px) { .postSmall { flex-basis: calc(50% - 34px); } .postBig { flex-basis: calc(100% - 34px); } } 

       .news { max-width: 980px; min-height: 500px; background-color: gray; display: flex; flex-wrap: wrap; justify-content: center; } .postSmall { flex-basis: calc(25% - 34px); height: 266px; background-color: #fff; display: inline-block; margin: 17px; } .postBig { flex-basis: calc(50% - 34px); height: 266px; background-color: #fff; display: inline-block; margin: 17px; } /* решение проблемы на определенном участке */ @media only screen and (max-width: 1010px) { .postSmall { flex-basis: calc(50% - 34px); } .postBig { flex-basis: calc(100% - 34px); } } /* 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) {} 
       <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="news"> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postBig"></div> <div class="postBig"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postSmall"></div> <div class="postBig"></div> <div class="postSmall"></div> <div class="postSmall"></div> </section>