Stop text from overlapping html and css

user_18055761 0
Viewed 123

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>

css html
3 Answers

Your button has a .aboutus class which sets position:absolute;. This ignores the width of the other elements and absolute positions the element in the parent div.

Please provide an actual representation of what you are trying to achieve.

If you want a structured approach, you can do something like this with flexbox (resize the windows to see how it goes):

.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-wrap: wrap;
  justify-content: space-between;
}

.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;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.creator2 {
  color: white;
  font-size: 25px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.aboutus {
  margin: 0;
  color: white;
  background-color: #123456;
  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">
      <p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
      <h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
      <p class="creator2" title="Can code: html, python, js ">Timgb11</p>
      <button class="aboutus" onclick="func()">About us!</button>
    </div>
  </div>
</body>

user_177306520

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>

user_152252670

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>

user_148071110
Related