When the browser window is minimized, the @media CSS will wrap to the bottom line

Question

When the browser window is minimized, the @media CSS will wrap to the bottom line

When the browser has a standard resolution, the layout looks like this:

https://i.sstatic.net/tNR6X.png

However, on smaller screens, it appears like this:

https://i.sstatic.net/U3RnZ.png

Is there a way to adjust the positioning of these blocks using @media in CSS for users with lower screen resolutions? I'm aiming for something like this:

https://i.sstatic.net/SpJ8y.png

This is 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>

This is my CSS code:

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

(... CSS styles continue)

@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 CSS styles and media queries are similar...)

I have attempted various methods of utilizing different @media css declarations where the dimensions are predefined, but none have been successful for me. If you can provide guidance, I would greatly appreciate it!

html css

Answer 1

Answer №1

Here is an illustration showcasing the use of css-grid in tandem 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>

This example features 3 boxes/widgets arranged as depicted in your design. These items align horizontally if the screen width is 481px or higher, splitting the body into 4 columns. The first widget consistently spans 2 columns.

If the screen width falls below 481px, the body contracts to 2 columns. Consequently, the second and third boxes/widgets drop to a new row since they can no longer fit side by side in the initial row.

Answer 2

Here is an illustration showcasing the use of css-grid in tandem 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>

This example features 3 boxes/widgets arranged as depicted in your design. These items align horizontally if the screen width is 481px or higher, splitting the body into 4 columns. The first widget consistently spans 2 columns.

If the screen width falls below 481px, the body contracts to 2 columns. Consequently, the second and third boxes/widgets drop to a new row since they can no longer fit side by side in the initial row.

When the browser window is minimized, the @media CSS will wrap to the bottom line

Answer №1

Similar questions

Change the colors of a dynamic row in an HTML table using various options

When scrolling, the selected text does not maintain its correct position

design and construct a three-dimensional shelving unit

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

Tips for customizing the appearance of popup windows

Guide on validating an Australian phone number with the HTML pattern

Are inline styles being utilized in a Styled component?

The background of the wrapper div refuses to expand beyond the original size of the browser window

The appearance of HTML varies depending on the type of mobile device being used

Do you require a lightbox for a white text box set against a semi-transparent black background?

Can the presence of buttons and links improve mobile responsiveness?

What could be the reason for meteor not injecting the text from my template helpers?

Transforming Input Background Color with jQuery based on Matching PHP Array Entry

How can I pass an Objective-C object to JavaScript?

What could be causing the div to be wider than the content inside of it?

What is the method for altering the background color of an input field upon entering text?

Scraping a website where the page source doesn't match what is displayed on the browser

Is there a way to deactivate a full HTML page during an event, similar to when using a JavaScript alert?

Prevent the ability to add options dynamically to a drop-down select list

Tips for organizing HTML logic in a separate document