How to get left and right aligned buttons to be responsive (displayed one after other)-CodePudding

Left and right aligned buttons should be responsive. I tried below code, unable to get responsive like if we reduce the resolutions buttons should be displayed one by one (vertical).

body {
  padding: 2em;
}

.leftAlign{
  float:left;
}
.rightAlign{
  float:right;
}

.btns {
  display: flex;
  flex-direction: column;
  margin-bottom: -0.5em;
  margin-left: -0.5em;

  .btn {
    margin-bottom: 0.5em;
    margin-right: 0.5em;
  }
}

@media (min-width: 32rem) {
  .btns {
    flex-direction: row;
  }
}

<div >
  <button >Left</button>
</div>

<div >
  <button >Righ1</button>
  <button >Right2</button>
</div>

CodePudding user response：

You can solve everything only using flex, don't need to use floats:

body {
  padding: 2em;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btns {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

@media (min-width: 32rem) {
  .btns {
    flex-direction: row;
  }
}

<div >
  <div >
    <button >Left</button>
  </div>

  <div >
    <button >Right1</button>
    <button >Right2</button>
  </div>
</div>

CodePudding user response：

Here you go...

First off all, change @media (min-width: 32rem) {} to @media (max-width: 32rem) {}. You want the layout to change if the screen size is maximum 32rem or less (not minimum 32rem or more).

When the screen size reaches 32rem, you want both columns (i.e., leftAlign and rightAlign) to take up 100% of the screen width, so you need to set width: 100%;. Also, add .rightAlign { float: left; } otherwise the right column will be still left aligned.

body {
  padding: 2em;
}

.leftAlign {
  float: left;
}

.rightAlign {
  float: right;
}

.btns {
  display: flex;
  flex-direction: column;
  margin-bottom: -0.5em;
  margin-left: -0.5em;
}

.btn {
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

@media (max-width: 32rem) {
  .btns {
    flex-direction: row;
  }
  .leftAlign,
  .rightAlign {
    width: 100%;
  }
  .rightAlign {
    float: left;
  }
}

<div >
  <button >Left</button>
</div>

<div >
  <button >Righ1</button>
  <button >Right2</button>
</div>

UPDATE

Add the following CSS:

@media (max-width: 32rem) {
  .rightAlign {
      display: flex;
      flex-direction: column;
  }
}

See the snippet below.

body {
  padding: 2em;
}

.leftAlign {
  float: left;
}

.rightAlign {
  float: right;
}

.btns {
  display: flex;
  flex-direction: column;
  margin-bottom: -0.5em;
  margin-left: -0.5em;
}

.btn {
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

@media (max-width: 32rem) {
  .btns {
    flex-direction: row;
    margin-bottom: 0;
  }
  
  .leftAlign,
  .rightAlign {
    width: 100%;
  }
  
  .rightAlign {
    float: left;
    display: flex;
    flex-direction: column;
  }
}

<div >
  <button >Left</button>
</div>

<div >
  <div>
    <button >Right1</button>
  </div>
  <div>
    <button >Right2</button>
  </div>
</div>