How to make text + button responsive

Question

I wanna have the button under the text if the pixel width of the screen is <= 664px. If it's unclear what I mean, here is an image link to image - I hope this helps. Basically I want to make it responsive. I tried some things but nothing worked. Has someone a idea?

.main {
    flex: 63%;
    background-color: white;
}

.main-box {
    background-color: #ffffff;
    height: 130px;
    display: table;
    width: 798px;
    border-right: solid;
    border-left: solid;
    border-bottom: solid;
    border-color: #E6E6E6;
}

.text-in-main-box{
    font-weight: bold;
    font-family: rob;
    width: 60%;
    padding: 7%;
    display: table-cell;
    vertical-align: middle;
}

.container-for-button-in-main-box{
    width: 40%;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.button-in-main-box{
    display:inline-block;
    padding:0.8em 1.2em;
    margin:0 0.3em 0.3em 0;
    border-radius:4em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:rob;
    font-weight:bold;
    color:#ffffff;
    background-color:#34E034;
    text-align:center;
    transition: all 0.2s;
}

.button-in-main-box:hover{
    transform: scale(1.1);
}

<div class="main-box">
            <div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
            <div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
        </div>

Answer 1

Go for media-query @media only screen and (max-width: 664px)

.main {
  flex: 63%;
  background-color: white;
}

.main-box {
  background-color: #ffffff;
  height: 130px;
  display: table;
  width: 798px;
  border-right: solid;
  border-left: solid;
  border-bottom: solid;
  border-color: #E6E6E6;
}

.text-in-main-box {
  font-weight: bold;
  font-family: rob;
  width: 60%;
  padding: 7%;
  display: table-cell;
  vertical-align: middle;
}

.container-for-button-in-main-box {
  width: 40%;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

.button-in-main-box {
  display: inline-block;
  padding: 0.8em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 4em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: rob;
  font-weight: bold;
  color: #ffffff;
  background-color: #34E034;
  text-align: center;
  transition: all 0.2s;
}

.button-in-main-box:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 664px) {
  .main-box {
    width: 100%;
    max-width: 798px;
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .text-in-main-box {
    width: 100%
    padding: 7% 0;
    text-align: center;
  }

  .container-for-button-in-main-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

<div class="main-box">
  <div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
  <div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>

Complete flex implementation for your solution will be something like below.

.main-box {
  background-color: #ffffff;
  height: 130px;
  display: flex;
  width: 798px;
  border-right: solid;
  border-left: solid;
  border-bottom: solid;
  border-color: #E6E6E6;
}

.text-in-main-box {
  font-weight: bold;
  font-family: rob;
  width: 60%;
  padding: 7%;
  display: flex;
  vertical-align: middle;
}

.container-for-button-in-main-box {
  width: 40%;
  display: flex;
  vertical-align: middle;
  /* height: 100%; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button-in-main-box {
  display: inline-block;
  padding: 0.8em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 4em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: rob;
  font-weight: bold;
  color: #ffffff;
  background-color: #34E034;
  text-align: center;
  transition: all 0.2s;
}

.button-in-main-box:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 664px) {
  .main-box {
    width: 100%;
    max-width: 798px;
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .text-in-main-box {
    width: 100%;
    padding: 7% 0;
    justify-content: center;
  }

  .container-for-button-in-main-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

<div class="main-box">
  <div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
  <div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>

Answer 2

You are closing the div for text before the button. Please use this code & do adjustments as you want.

<div class="main-box">
        <div class="text-in-main-box">Sage “Hallo, Welt" mit Python
        <div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
    </div>
</div>

Answer 3

Use @media query for it. Using it you can apply custom css properties to your site when a certain condidion is true (in your example max-width: 664px)

Heres a tutorial on it:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Example:

@media screen and (max-width: 664px) {


.button-in-main-box{
    background-color: green;
  }
}