CSS DIV alignment to new rule?

Question

I have a container divwith two divelements inside it. In the desktop version, two elements are divaligned next to each other.

In mobile mode, I want them to be under them. So I thought I was just updating min-widthto 100%to force the next divto the next rule.

Well, not really ..... It's still next to each other, but the screen width just gets doubled.

<div class="blocks_container">
   <div class="block_content">
       Some content
   </div>
   <div class="block_content">
       Some content
   </div>
</div>

.blocks_container {
    width: 100%;
    margin: 40px 0 40px 0;
    display: flex;
    align-items: center;
}

.block_content {
    display: inline-block;
    min-width: 100%;
    margin: 3% 2% 2% 0;
}

So I tried to switch on display: blockusing float: left, but no luck.

I think this should be easily solvable, but I could not solve it .....

Answer 1

display:flex .blocks_container

.blocks_container {
    width: 100%;
    margin: 40px 0 40px 0;
    align-items: center;
}

width: 200px; .block_content, div .

.block_content {
    display: inline-block;
    width: 200px;
    margin: 3% 2% 2% 0;
}

div ,

Answer 2

@media div . .

.blocks_container {
    width: 100%;
    margin: 40px 0 40px 0;
    display: flex;
    align-items: center;
}
.block_content {
    display: inline-block;
    width: 48%; //to compensate 2% right margin
    margin: 3% 2% 2% 0;
}
@media screen and (max-width: 360px) {
  .block_content {
    width: 98%;
  }
}

Answer 3

For screen width, you need to place the meta tag inside the main tag.

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

Answer 4

If you use flex, you can specify flex-direction. Therefore, you can try this for mobile devices.

flex-direction: column;

And the big screens:

flex-direction: row ;