CODEWITHSUNDEEP
htmlcss
Christian2B
Christian2B

Reputation: 23

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

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>

Upvotes: 2

Views: 971

Answers (3)

Caleb Gross
Caleb Gross

Reputation: 385

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>

Upvotes: 0

George Chond
George Chond

Reputation: 997

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>

Upvotes: 1

Maik Lowrey
Maik Lowrey

Reputation: 17556

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>

Upvotes: 0

Related Questions