Адаптивный макет сайта

Question

Хочу разработать адаптивный вариант CSS Grid-десктопного макета будущего сайта Блоки: footer, shadow, shadow_r, header - хотелось сделать display none, а все остальное в 1 столбик. Но у меня не получается. Раньше таким делом занимался, не пойму, в чем беда. Помогите пожалуйста.

 <!DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="grid-container">
      <div class="photo"></div>
      <div class="top"></div>
      <div class="main"></div>
      <div class="header"></div>
      <div class="footer"></div>
      <div class="shadow"></div>
      <div class="shadow_r"></div>
    </div>

    <style>

    html, body, .grid-container { height: 100%; margin: 0; }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 0.6fr 1.1fr 1.3fr 1fr 1.3fr 0.7fr;
      gap: 1px 1px;
      grid-template-areas: "shadow header header header shadow_r" "shadow photo photo photo shadow_r" "shadow main main top shadow_r" "shadow main main top shadow_r" "shadow main main top shadow_r" "shadow footer footer footer shadow_r";
    }

    .photo { 

    grid-area: photo; 
    background: url(https://sun2.48276.userapi.com/qjbl0RHiM1rSy5Z6S49qb8P2ChBI-Q_LKCOl1w/eRNIFxtyprY.jpg) no-repeat;
        background-size: cover;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        top: 0;
        height: 180px; 
    }

    .top { grid-area: top; }

    .main { grid-area: main; }

    .header { grid-area: header; }

    .footer { grid-area: footer; }

    .shadow { grid-area: shadow; }

    .shadow_r { grid-area: shadow_r; }

    /* For presentation only, no need to copy the code below */
    .grid-container * { 
     border: 1px solid red;
     position: relative;
    }

    .grid-container *:after { 
     content:attr(class);
     position: absolute;
     top: 0;
     left: 0;
    }


    /* Smartphones (вертикальная и горизонтальная) ----------- */

    @media only screen and (min-width: 350px) and (max-width: 641px) {
      .grid-container {
        grid-template-columns: 1fr;
      } 
footer, shadow, shadow_r, .header
{
display:none;
}    
    </style> 
    </html>

Answer 1

В медиа запросах вам нужно перестраивать сетку grid-template-columns и так же grid-template-areas (так как вы явно указали расположение блоков). Если вы в медиа перепишете grid-template-areas то будет вам счастье. +проверте чтоб у вас были написаны правильно стили класы и т.д.

БЛОГ НА HUSL

Адаптивный макет сайта

Ответы (1 шт):