How to fix text for responsive design-CodePudding

I'm a beginner in HTML/CSS and I have 4 DIVs with some text and a button as in the picture below:

When I resize the windows and the text goes on multiple lines the buttons aren't on the same line. How can I fix this?

And also when I resize on smartphone view the buttons overflow the text like the picture below:

DEMO:

.o_bd{
  width: 100%;
  height: 650px ;
  }
.backdrop{
  display:inline-block;
  width:80%;
  margin-left: 10%;
  margin-right: 10%;
}
.section-text{
  text-align: center; 
  padding: 0% 10% 10% 10%;
  float: left;
  width: 30%;
  display:inline-block;
}
.btn_back{
  background-color:#a3826c; 
  color: white; 
  font-family: Poppins; 
  font-weight:500; 
  width:150px; 
  height: 50px; 
  border:solid 0px;
}
.text-stats{
  height:100px;
}

@media only screen and (max-width: 1630px) {
.text-stats {
    background-color: lightblue;
  }
}

<div class="o_bd">
 <div class="backdrop">
  <div class="section-text">
    <h3>df dsafda</h3>
    <div class="text-stats"
      <p>adfadfasd asdfa daf sadf adsf asdfadsfasdf aa dsaf</p>
    </div>
    <button class="btn_back">MEHR ERFAHREN</button>
  </div>
   
  <div class="section-text">
    <h3>asdf adsf</h3>
    <div class="text-stats">
      <p>adfadfafdadfa adsfadsfadfa ad sadf adsfa dfa asd fa</p>
    </div>
    <button class="btn_back">MEHR ERFAHREN</button>
  </div>

  <div class="section-text">
    <h3>adsf asdfadsf</h3>
    <div class="text-stats">
      <p>adfafdadsfa dsaf adsf adsf asdfadfafd</p>
    </div>
    <button class="btn_back">MEHR ERFAHREN</button>
  </div>

  <div class="section-text">
    <h3>adfaadf hjhkjhkjkj</h3> 
    <div class="text-stats">
      <p>adfas fafdsadsfasdfasd asdfadsfasdf asdfadsfadsf asdfadsfadsf asdfsadfa</p>
    </div>
    <button class="btn_back">MEHR ERFAHREN</button>
  </div>
 </div>
</div>

CodePudding user response：

first of all you can add the font-size in your CSS. You nedd to add media query even for your buttons. if you are a beginner, bootstrap is a nice solution for you to have responsivness. But for your buttons if you want that they be responsive you can put the size in % and not in pixels. your btn_back class is ALWAYS witdh: 150px.. try something like 10% (it will be 10% of the container).

CodePudding user response：

if you want to apply RWD (Responsive Web Design) you shouldn't use floats. Use Flexbox or Grid instead. Also, try not to use fixed heights or widths because that prevents responsiveness and tend to overflow elements.

Typically, we start showing stacked elements and progressively transform them in columns as the size of the viewport grows (Mobile First approach) but this is optional.

You could do something like:

.o_bd {
  width: 100%;
  /* height: 650px ; Avoid fixed height */
}
.backdrop{
  display:flex;
  flex-direction: column; /* Stack elements when bellow 980px */
  align-items: center;
}
.section-text{
  text-align: center; 
  padding: 0% 10% 10% 10%;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Media query from 980 viewport width */
@media (min-width: 980px) {
  .backdrop {
     width:80%;
     margin-left: 10%;
     margin-right: 10%;
     flex-wrap: wrap;
     flex-direction: row;
  }
}

I've made a CodePen with your demo code, changing some rules, so you can see how simple it is to make it responsive. https://codepen.io/LucasFer/pen/gOxEmMz?editors=1100