使用缩小的浏览器 window @media css 包装到底线

Question

Now, at normal browser resolution, the information is displayed like this:

But if the browser has a low resolution, then everything is displayed like this:

How can I move these blocks down with @media css if the user has a small screen resolution? So that there was something like this:

My template code:

          <div class="flex-c">

        <div class="jackpot__information" v-if="luckyOfDay">
          <div class="widget widget_jackpot widget_luck">
            <div class="widget__head">
              <div class="widget__title"><i class="icon icon_horseshoe"></i><span> Удача дня </span>
              </div>
            </div>
            <div class="widget__main">
              <a class="widget__photo photo" :href="'/user/' + luckyOfDay.winner.uid">
                <img class="widget__image image"
                     :src="luckyOfDay.winner.avatar"
                     :alt="luckyOfDay.winner.username">
              </a>
              <div class="widget__information">
                <div class="symbol_usd widget__bank">{{ luckyOfDay.total_bank }}</div>
                <a class="widget__nickname link" :href="'/user/' + luckyOfDay.winner.uid"> {{ luckyOfDay.winner.username }} </a>
              </div>
            </div>
            <a class="widget__chance link" :href="'/jackpot/history/' + luckyOfDay.game_id"> Шанс {{ luckyOfDay.winner_chance }}% </a>
          </div>
        </div>

        <div class="jackpot__last">
          <div class="widget widget_jackpot widget_last_game ng-star-inserted" v-if="lastGame">
            <div class="widget__head">
              <div class="widget__title"><i class="icon icon_clock"></i><span> Пред. игра </span>
              </div>
            </div>
            <div class="widget__main">
              <a class="widget__photo photo" :href="'/user/' + lastGame.winner.uid">
                <img class="widget__image image"
                     :src="lastGame.winner.avatar"
                     :alt="lastGame.winner.username">
              </a>
              <div class="widget__information">
                <div class="symbol_usd widget__bank">{{ lastGame.total_bank }}</div>
                <a class="widget__nickname link" :href="'/user/' + lastGame.winner.uid"> {{ lastGame.winner.username }} </a>
              </div>
            </div>
            <a class="widget__chance link" :href="'/jackpot/history/' + lastGame.game_id"> Шанс {{ lastGame.winner_chance }}% </a>
          </div>
        </div>

      </div>

My CSS code:

.widget_luck {
    position: relative;
    width: 164px;
    height: 150px;
    padding: 18px 20px;
    background-color: #213137;
    border-radius: 10px
}

.widget_luck .widget__title {
    display: block;
    color: #eadfc4;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase
}

.widget_luck .widget__title .icon {
    top: 1px;
    font-size: 14px;
    margin-right: 6px
}

.widget_luck .widget__main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px
}

.widget_luck .widget__photo {
    width: 35px;
    height: 35px
}

.widget_luck .widget__photo .widget__image {
    width: 35px;
    height: 35px;
    max-width: 35px;
    max-height: 35px;
    border-radius: 10px
}

.widget_luck .widget__information {
    display: block;
    width: calc(100% - 35px);
    padding-left: 10px
}

.widget_luck .widget__bank {
    display: block;
    color: #f59575;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase
}

.widget_luck .widget__nickname {
    display: inline-block;
    color: #d6ddea;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.widget_luck .widget__chance {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 11px;
    background-color: #182328;
    border-radius: 7px;
    color: #eadfc4;
    font-size: 12px;
    font-weight: 600;
    line-height: 34px;
    text-transform: uppercase;
    text-align: center
}

@media (max-width:374px) {
    .widget_luck .widget__bank {
        font-size: 12px
    }
}

@media (max-width:557px) {
    .widget_luck .widget__title span {
        display: none
    }
}

@media (max-width:1365px) {
    .widget_luck {
        height: 88px;
        padding: 13px 15px
    }

    .widget_luck .widget__title {
        font-size: 12px
    }

    .widget_luck .widget__title .icon {
        top: 1px;
        font-size: 12px;
        margin-right: 5px
    }

    .widget_luck .widget__main {
        margin-top: 10px
    }

    .widget_luck .widget__chance {
        position: absolute;
        top: 13px;
        right: 10px;
        display: inline-block;
        width: auto;
        height: 18px;
        padding: 0 5px;
        margin-top: 0;
        font-size: 11px;
        line-height: 17px;
        border-radius: 5px
    }
}

@media (min-width:1600px) {
    .widget_luck .widget__title {
        font-size: 15px;
        line-height: 16px
    }

    .widget_luck .widget__chance {
        font-size: 13px;
        line-height: 35px
    }
}

.widget_last_game {
    position: relative;
    width: 164px;
    height: 150px;
    padding: 18px 20px;
    background-color: #213137;
    border-radius: 10px
}

.widget_last_game .widget__title {
    display: block;
    color: #eadfc4;
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase
}

.widget_last_game .widget__title .icon {
    top: 1px;
    font-size: 14px;
    margin-right: 6px
}

.widget_last_game .widget__main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px
}

.widget_last_game .widget__photo {
    width: 35px;
    height: 35px
}

.widget_last_game .widget__photo .widget__image {
    width: 35px;
    height: 35px;
    max-width: 35px;
    max-height: 35px;
    border-radius: 10px
}

.widget_last_game .widget__information {
    display: block;
    width: calc(100% - 35px);
    padding-left: 10px
}

.widget_last_game .widget__bank {
    display: block;
    color: #f59575;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase
}

.widget_last_game .widget__nickname {
    display: inline-block;
    color: #d6ddea;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.widget_last_game .widget__chance {
    display: block;
    width: 100%;
    height: 35px;
    margin-top: 11px;
    background-color: #182328;
    border-radius: 7px;
    color: #eadfc4;
    font-size: 13px;
    font-weight: 600;
    line-height: 35px;
    text-transform: uppercase;
    text-align: center
}

@media (max-width:374px) {
    .widget_last_game .widget__bank {
        font-size: 12px
    }
}

@media (max-width:557px) {
    .widget_last_game .widget__title span {
        display: none
    }
}

@media (max-width:1365px) {
    .widget_last_game {
        height: 88px;
        padding: 13px 15px
    }

    .widget_last_game .widget__title {
        font-size: 12px
    }

    .widget_last_game .widget__title .icon {
        top: 1px;
        font-size: 12px;
        margin-right: 5px
    }

    .widget_last_game .widget__main {
        margin-top: 10px
    }

    .widget_last_game .widget__chance {
        position: absolute;
        top: 13px;
        right: 10px;
        display: inline-block;
        width: auto;
        height: 18px;
        padding: 0 5px;
        margin-top: 0;
        font-size: 11px;
        line-height: 17px;
        border-radius: 5px
    }
}

I've tried different methods of inserting into different @media css where the dimensions are already set, but it didn't work for me. Please tell me, I will be grateful!

Answer 1

As requested, a simple example of css-grid in combination with media queries.

 body { margin: 0; padding: 20px; display: grid; grid-gap: 20px; } @media only screen and (max-width: 480px) { body { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 481px) { body { grid-template-columns: repeat(4, 1fr); } }.grid-span-2 { grid-column: span 2; } div { border: 1px solid black; padding: 5px; }

 <div class="grid-span-2">Widget 1</div> <div class="grid-span-1">Widget 2</div> <div class="grid-span-1">Widget 3</div>

In this example you have 3 boxes/widgets as in your picture. The are layout next to each other if the screen size is 481px or above as the body is divided into 4 columns. The 1st widtget always span 2 columns.

If the screen size is below 481px, then the body is reduced to 2 columns. This will force the 2nd and 3rd box/widget to drop down into a 2nd row as they no further fit in the first row.