CODEWITHSUNDEEP
htmlcssresponsive-design
Pierre
Pierre

Reputation: 155

Responsive depending not on screen width but on parent div width?

I would like the blocks below to pile on top of each other when the parent div is too small to display them on the same line.

I have tried using a @media rule with max-width but it only takes into account the width of the browser, not of the parent div.

I have tried with width instead of max-width but it did not help.

.menuTwoColumns {
  display: table;
}

.menuTwoColumns > div {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px;
}

/* this only help for the browser width not the parent div width */
@media screen and (max-width: 479px) {
    .menuTwoColumns {
        display: block;
    }
    .menuTwoColumns > div {
        display:inline-block;
    }
}
<html>
    <head>
<style>

</style>
    </head>
    <body>
        <div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
            <div class="menuTwoColumns">
                <div>
                    <p>You can resize</p>
                </div>
                <div>
                    <p>the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 1197

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

Do it differently using flexbox

.menuTwoColumns {
  display: flex;
  flex-wrap:wrap;
}

.menuTwoColumns > div {
  flex:calc(479px / 2);
  display:flex;
  align-items:center;
}
<div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
  <div class="menuTwoColumns">
    <div>
      <p>You can resize</p>
    </div>
    <div>
      <p>the parent div with your mouse the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions