'Stop text from overlapping html and css

when I resize my window my text is overlapping. How do I stop this from happening? I want it to just resize if it colliding with the other text elements or, if not possible, that they just stack under each other? problem

I already tried

flex box
set min height

and can someone tell me what position I should use mainly?

.flex_container {
  display: flex;
  flex-wrap: wrap;
  min-width: 550px;
  flex-direction: column;
  position: relative;
}

.bar {
  position: relative;
  background-color: rgb(41, 80, 143);
  border: 5px solid rgb(46, 84, 149);
  height: 30px;
  width: auto;
  margin: 0;
}

.tekst {
  color: white;
  position: static;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.ccontroller {
  margin-top: -12px;
}

.creator1 {
  font-size: 25px;
  color: white;
  text-align: left;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.creator2 {
  color: white;
  font-size: 25px;
  text-align: right;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.aboutus {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  background-color: #123456;
  height: 15px;
  width: auto;
}

body {
  background-color: #123456;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

<body>
  <div class="flex_container">
    <div class="bar">
      <h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
      <button class="aboutus" onclick="func()">About us!</button>
      <div class="ccontroller">
        <p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
        <p class="creator2" title="Can code: html, python, js ">Timgb11</p>
      </div>
    </div>
  </div>
</body>

html css

Solution 1:^[1]

Add min-widthto you items. Like in the abstract working example below:

.flex-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

p {
  margin: 5px;
  min-width:200px;
}

<div class="flex-box">
  <p>foo</p>
  <p>bar</p>
  <p>baz</p>
</div>

Solution 2:^[2]

A way to fix your problem is using flex box, but this time add a part in the css where once the screen gets to a certain size, the flex-box goes from row, to column. Like this:

.bar-element {
    display: flex;
    flex-direction: row;
}

@media (max-width:700px){
    .bar-element {
        display: flex;
        flex-direction: column;
    }
}

SO once the screen gets to a curtain size it changes the layout.

Here is a demo:

.flex {
  display: flex;
  flex-direction: row;
}

p {
  margin: 5px;
}

@media (max-width:700px){
   .flex {
      display: flex;
      flex-direction: column;
    }

}

<div class="flex">
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</div>

You can also check out the link here, to learn more on how to change properties on different screen sizes.

Here is your code edited:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* .flex_container {
        display: flex;
        flex-wrap: wrap;
        min-width: 550px;
        flex-direction: column;
        position: relative;
    } */
    
    .bar {
        position: relative;
        background-color: rgb(41, 80, 143);
        border: 5px solid rgb(46, 84, 149);
        height: 30px;
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .tekst {
        color: white;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
        vertical-align: middle;
        line-height: 30px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .ccontroller {
        display: flex;
        flex-direction: row;
        width: fit-content;
        flex-wrap: wrap;
        justify-content: flex-end;
        justify-self: flex-end;
    }
    
    .creator1 {
        display: block;
        font-size: 25px;
        color: white;
        text-align: left;
        margin: 0;
        line-height: auto;
        font-family: Arial, Helvetica, sans-serif;
        margin-right: 10px;
    }
    
    .creator2 {
        display: block;
        color: white;
        font-size: 25px;
        text-align: left;
        margin: 0;
        line-height: auto;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .aboutus {
        display: block;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        background-color: #123456;
        height: fit-content;
        width: auto;
        margin-top: 16px;
        margin-left: 50px;
        text-align: center;
    }
    
    body {
        background-color: #123456;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: 100% 100%;
        min-width: 550px;
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    @media (max-width:700px) {
        .bar {
            display: flex;
            flex-direction: column;
        }
        .ccontroller {
            display: flex;
            flex-direction: column;
        }
    }
</style>

<body>
    <div class="flex_container">
        <div class="bar">
            <h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
            <button class="aboutus" onclick="func()">About us!</button>
            <div class="ccontroller">
                <p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
                <p class="creator2" title="Can code: html, python, js ">Timgb11</p>
            </div>
        </div>
    </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Maik Lowrey
Solution 2

'Stop text from overlapping html and css

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]