Мой flexbox внутри макета сетки неправильно переносится между медиа-запросами - PullRequest
Новая
       41

Мой flexbox внутри макета сетки неправильно переносится между медиа-запросами

0 голосов
/ 29 мая 2020

В настоящее время я застрял с этой адаптивной проблемой - я делаю сайт-портфолио с адаптивным дизайном для трех состояний. Но моя отзывчивость в настоящее время нарушена изображениями в потоке flexbox. Можно переключаться между широкоэкранным экраном и экраном планшета, но один экран между планшетом и мобильным устройством не работает должным образом. 

 <div class="pics">
              <img src="epic fight/truck driver.png" class="cover">
              <div class="truck">

            <div  class="jump"><img src="epic fight/anim_td_jump_lp.gif"/></div>
            <div class="jump"><img src="epic fight/anim_td_jump_lk.gif"/></div>
            <div class="jump"><img src="epic fight/anim_td_jump_hp.gif"/></div>
            <div class="jump"><img src="epic fight/anim_td_jump_hk.gif"/></div>
            <div class="stand"><img src="epic fight/anim_td_hk.gif"/></div>
            <div class="stand"><img src="epic fight/anim_td_lk.gif"/></div>
            <div class="stand"><img src="epic fight/anim_td_hp.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_td_crouch_lp.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_td_crouch_lk.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_td_crouch_hp.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_td_crouch_hk.gif"/></div>
        </div>
                  <img src="epic fight/police officer.png" class="cover">
              <div class="truck">
            <div class="stand"><img src="epic fight/anim_po_block.gif"/></div>
            <div  class="crouch"><img src="epic fight/anim_po_crouch.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_po_crouch_block.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_po_crouch_hurt.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_po_crouch_lk.gif"/></div>
            <div class="crouch"><img src="epic fight/anim_po_crouch_lp.gif"/></div>
            <div class="stand"><img src="epic fight/anim_po_hk.gif"/></div>
            <div class="stand"><img src="epic fight/anim_po_hp.gif"/></div>
            <div class="stand"><img src="epic fight/anim_po_hurt.gif"/></div>
            <div class="stand"><img src="epic fight/anim_po_idle.gif"/></div>
            <div class="jump"><img src="epic fight/anim_po_jump.gif"/></div>
        </div>
          </div>

css для мультимедийного запроса планшета 

.cover {
    width: 100%;
}
.pics {
    margin-top: 10px;
}

.truck {
    display:flex;
    flex-wrap: wrap;
    margin: 20px;
    max-width: 100%;
  overflow: hidden;
    justify-content: center;

    }

    .truck  > div.jump > img {
        height:250px;
        width: auto;

    }
    .truck  > div.stand > img {
        height:150px;
        width: auto;
    }
    .truck > div.crouch > img {
        height: 150px;
        width: auto;}

css для мобильных устройств (почти столько же) 

.cover {
    width: 100%;
}
.pics {
    margin-top: 10px;
}
.truck {
    display:flex;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: flex-end;
        justify-content: center;
    }

    .truck  > div.jump > img {
        height:250px;
        width: auto;

    }
    .truck  > div.stand > img {
        height:150px;
        width: auto;
    }
    .truck > div.crouch > img {
        height: 150px;
        width: auto;
    }
...