How do I stop text from moving when I resize the div

user_11746438 0
Viewed 1070

I've been working on this project for awhile, an article that holds multiple items within it. However, when resizing the web page to a smaller size, the "player-summary" class is pushed into the section with the "name" class. This is despite the "name" class having a fixed width of 250px. I'm not quite sure how to fix this so resizing the web page won't bleed into it.

Additionally, when resizing, why does my text overflow out of my container?

html,body{
    width: 100%;
    height: 100%;
}
.center{
    width:90%;
    margin: auto;

    
}

.big-board_inner{
  width: 80%;
  margin: auto;
  background-color: white;  
  
}

article{
    border: solid 1px;
    border-radius: 10px;
}
.top-info{
 display: flex;
 flex-direction: row;
 width:100%;
 height: 100%; 
 font-size: 15px;
}

.name{
    display: block;
    width: 250px;
    margin: .3em;
    padding-right: 3em;
    font-size: 20px;    
    padding-left:.5em;
    
}

.player-summary{
    
    margin: .5em;
    padding-right: 2em;
}

.age{
    margin: .5em;
    border-left: solid 1px;
    padding-left: 1em;
}
.main-info{
    width: 50%;
    display: flex;
    flex-direction: column;

}
.profile img{
    width: 250px;
    height: auto;
    border-radius: 15px;
    padding: .5em;
}
    <!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>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class = "center">
        <div class = "big-board_inner">
            <article>
                <div class="top-info">
                  <div class = "name">Dustin Harris <br> OF - Tex  </div>
                  <div class="player-summary">Summary: <br>Dustin Harris is as pure as hitter you can find, with a LF fit</div>
                  <div class="age">Highest Level: A+ <br> Age: 21</div>
                  <div class="age">Height: 6'1" <br> Weight: 215 lbs</div>
                 </div>
                 <div class="main-info">
                    <div class="profile">  <img src="images/Dustin Harris.jfif"></div>
                 </div>
            </article>
        </div>
       </div>
    </body>
    </html>

css html
1 Answers

Use min-width. It would make your element have a minimum-width to maintain no matter the screen size if you set a static value, like in this case, 250px.

As for why your elements overflow out of your container, it's because you don't have any wrapping on your container. You can use flexbox's flex-wrap property to wrap your elements to fit the available space. See the snippet below:

html,
body {
  width: 100%;
  height: 100%;
}

.center {
  width: 90%;
  margin: auto;
}

.big-board_inner {
  width: 80%;
  margin: auto;
  background-color: white;
}

article {
  border: solid 1px;
  border-radius: 10px;
}

.top-info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  height: 100%;
  font-size: 15px;
}

.name {
  display: block;
  min-width: 250px;
  margin: .3em;
  padding-right: 3em;
  font-size: 20px;
  padding-left: .5em;
}

.player-summary {
  margin: .5em;
  padding-right: 2em;
}

.age {
  margin: .5em;
  border-left: solid 1px;
  padding-left: 1em;
}

.main-info {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.profile img {
  width: 250px;
  height: auto;
  border-radius: 15px;
  padding: .5em;
}
<!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>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="center">
    <div class="big-board_inner">
      <article>
        <div class="top-info">
          <div class="name">Dustin Harris <br> OF - Tex </div>
          <div class="player-summary">Summary: <br>Dustin Harris is as pure as hitter you can find, with a LF fit</div>
          <div class="age">Highest Level: A+ <br> Age: 21</div>
          <div class="age">Height: 6'1" <br> Weight: 215 lbs</div>
        </div>
        <div class="main-info">
          <div class="profile"> <img src="images/Dustin Harris.jfif"></div>
        </div>
      </article>
    </div>
  </div>
</body>

</html>

More on flex-wrap here.

If what you're looking for is text-wrapping, then refer here instead.

user_153726680
Related