Making two divs responsive using flexbox-CodePudding

I am creating a chat application. In that I have two divs with the flex property. first div contains list of users and second div contains chat data. In desktop view, I am able to achieve two divs side by side. But when I view it on mobile view I want in some way to hide the user list div (same as whatsapp). I write that logic in media query but it is hiding all the divs i.e. blank page I can only see.

Can anyone guide me how to achieve responsiveness using flexbox?

Am I missing something?

.friendContainer {
  display: grid;
  grid-template-columns: 2fr 4fr;
}

.list {
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  max-height: calc(100vh - 5rem);
}

.singleListBlock {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.userIcon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 5px;
  padding: 0;
}

.textStyle {
  padding-left: 10px;
}

.textStyle h4 {
  margin: 0;
}

.textStyle p {
  margin-top: 0;
}

.singleListBlock:hover {
  background-color: #2424;
  cursor: pointer;
}


/* chat */

.chatList {
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
  position: absolute;
  bottom: 70px;
  max-height: calc(100vh - 5rem - 60px);
}

.chatListWithLeft {
  justify-content: flex-end;
  text-align: justify;
  background: #434343;
  padding: 5px;
  border-radius: 8px;
  word-break: break-all;
  max-width: 50%;
  margin-left: 0;
  margin-right: auto;
}

.chatListWithRight {
  justify-content: flex-end;
  text-align: justify;
  background: #434343;
  padding: 5px;
  border-radius: 8px;
  word-break: break-all;
  max-width: 50%;
  margin-left: auto;
  margin-right: 0;
}

.elementStyle {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  width: 100%;
}

@media (max-width: 500px) {
  .singleListBlock {
    display: none;
  }
}

<section class='friendContainer'>
  <div class='list'>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

  </div>

  <div class='list'>
    <div class='chatList'>
      <div class='chatListWithLeft'>
        <p>Hii...</p>
      </div>
      <div class='chatListWithRight'>
        <p>hi</p>
      </div>
      <div class='chatListWithLeft'>
        <p>hi</p>
      </div>
      <div class='chatListWithRight'>
        <p>hey</p>
      </div>
      <div class='chatListWithLeft'>
        <p>hi there</p>
      </div>
      <div class='chatListWithRight'>
        <p>how</p>
      </div>
      <div class='chatListWithLeft'>
        <p>
          is going. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente nobis temporibus, dignissimos hic placeat.
        </p>
      </div>
      <div class='chatListWithRight'>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores provident quo quae suscipit, error obcaecati placeat exercitationem accusamus animi sit eos quasi sunt aut corporis repudiandae iste officia. Aspernatur.
        </p>
      </div>
      <div class='chatListWithLeft'>
        <p>This is it no.</p>
      </div>
      <div class='chatListWithRight'>
        <p>This is it yes.</p>
      </div>
      <div class='chatListWithLeft'>
        <p>This is it ok.</p>
      </div>
    </div>
    <form>
      <div class='elementStyle'>
        <input type="text" style='width: "100%"' />
        <button style='height: "60px"' '>Send</button>
            </div>
          </form>
        </div>
      </section>

CodePudding user response：

Give different class names to both children of friendContainer. i.e. list-left & list-right. And in media-query give display: none to list-left.

CodePudding user response：

Here.

.friendContainer {
  display: grid;
  grid-template-columns: 2fr 4fr;
}

@media (max-width: 500px) {
  .hideOnPhone {
    display: none !important;
  }
  .friendContainer {
    grid-template-columns: 6fr;
  }
}

.list {
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  max-height: calc(100vh - 5rem);
  min-height: calc(100vh - 5rem);
}

.singleListBlock {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.userIcon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 5px;
  padding: 0;
}

.textStyle {
  padding-left: 10px;
}

.textStyle h4 {
  margin: 0;
}

.textStyle p {
  margin-top: 0;
}

.singleListBlock:hover {
  background-color: #2424;
  cursor: pointer;
}


/* chat */

.chatList {
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
  position: absolute;
  bottom: 70px;
  max-height: calc(100vh - 5rem - 60px);
}

.chatListWithLeft {
  justify-content: flex-end;
  text-align: justify;
  background: #434343;
  padding: 5px;
  border-radius: 8px;
  word-break: break-all;
  max-width: 50%;
  margin-left: 0;
  margin-right: auto;
}

.chatListWithRight {
  justify-content: flex-end;
  text-align: justify;
  background: #434343;
  padding: 5px;
  border-radius: 8px;
  word-break: break-all;
  max-width: 50%;
  margin-left: auto;
  margin-right: 0;
}

.elementStyle {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  width: 100%;
}

<section class='friendContainer'>
  <div class='list hideOnPhone'>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

    <div class='singleListBlock'>
      <div class='userIcon'>
        <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" />
      </div>
      <div class='textStyle'>
        <h4>Test</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam.
        </p>
      </div>
    </div>

  </div>

  <div class='list'>
    <div class='chatList'>
      <div class='chatListWithLeft'>
        <p>Hii...</p>
      </div>
      <div class='chatListWithRight'>
        <p>hi</p>
      </div>
      <div class='chatListWithLeft'>
        <p>hi</p>
      </div>
      <div class='chatListWithRight'>
        <p>hey</p>
      </div>
      <div class='chatListWithLeft'>
        <p>hi there</p>
      </div>
      <div class='chatListWithRight'>
        <p>how</p>
      </div>
      <div class='chatListWithLeft'>
        <p>
          is going. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente nobis temporibus, dignissimos hic placeat.
        </p>
      </div>
      <div class='chatListWithRight'>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores provident quo quae suscipit, error obcaecati placeat exercitationem accusamus animi sit eos quasi sunt aut corporis repudiandae iste officia. Aspernatur.
        </p>
      </div>
      <div class='chatListWithLeft'>
        <p>This is it no.</p>
      </div>
      <div class='chatListWithRight'>
        <p>This is it yes.</p>
      </div>
      <div class='chatListWithLeft'>
        <p>This is it ok.</p>
      </div>
    </div>
    <form>
      <div class='elementStyle'>
        <input type="text" style='width: "100%"' />
        <button style='height: "60px"'>Send</button>
      </div>
    </form>
  </div>
</section>