Reputation: 11

Unable to fit text within div bubble

this is my first post on stack. I am having trouble getting my about section to fit in its proper bubble. You can see in the image as to what I am talking about. This is still a work in progress obviously so it may not look correct on all displays.(if you have tips to adjust for screen resolution please let me know as well. Thank you :) )

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
}

main {
  min-height: 100vh;
  background: linear-gradient(to right, #43cea2, #185a9d);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass {
  background: white;
  min-height: 80vh;
  width: 60%;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 2rem;
  display: flex;
}

.dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-radius: 2rem;
}

ul {
  list-style: none;
  text-decoration: none;
}

.link {
  display: flex;
  margin: 2rem 0rem;
  padding: 1rem 5rem;
  align-items: center;
}

.link a {
  padding: 0rem 2rem;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 25px;
  font-weight: 200px;
}

.bubble .link {
  display: block;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
  border-radius: 2rem;
  position: relative;
  color: white;
}

.bubble .link:hover {
  color: white;
  background: rgba(225, 255, 255, 0.2);
  letter-spacing: .2px;
}

.main {
  flex: 2;
}

.main h1 {
  color: white;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 600;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-20%) translateY(-50%);
}

.name {
  font-weight: bold;
  font-size: 40px;
  padding: 2rem;
  color: white;
}

.icons a {
  text-decoration: none;
}

.icons a:hover {
  color: white;
  opacity: 0.5;
}

.mainabout {
  flex: 2;
}

.about-bubble {
  background: white;
  min-height: 60vh;
  width: 100%;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 2rem;
  display: flex;
  transform: translateX(5%) translateY(1%);
}

.mainabout p {
  font-size: 15px;
  color: white;
  position: relative;
  line-height: 20px;
  transform: translateX(2%) translateY(5%);
}

.mainabout h1 {
  color: white;
  padding: 2rem;
  font-size: 40px;
  position: relative;
  text-align: center;
  transform: translateY(10%);
}

.next-bttn {
  color: #34e89e;
  position: relative;
  transform: translateX(-70%) translateY(93%);
  border-radius: 5px;
}

.next-bttn button {
  color: #43cea2;
  position: relative;
  border-radius: 5px;
  padding: 10px 20px;
  opacity: 0.5;
  font-weight: bold;
  border: none;
  background-color: transparent;
}

<body>
  <main>
    <section class=" glass">
      <div class=" dashboard">
        <div class="name" <h1>First Name Last Name</h1>
        </div>
        <div class="bubble">
          <ul>
            <div class="links">
              <div class="link">
                <li><a href="about.html">about</a></li>
              </div>

              <div class="link">
                <li><a href="work.html">work</a></li>
              </div>

              <div class="link">
                <li><a href="#skills">skills</a></li>
              </div>

              <div class="link">
                <li><a href="#resume">resume</a></li>
              </div>

              <div class="link">
                <li><a href="#contact">contact</a></li>
              </div>

          </ul>
          </div>
          <div class="icons">
            <a target="_blank" rel="noopener noreferrer" href="">
              <img src="32px.png" alt="" width="32" height="32" /> </a>
            <a target="_blank" rel="noopener noreferrer" href="">
              <img src="32x32.png" alt="" width="32" height="32" /> </a>
            <a target="_blank" rel="noopener noreferrer" href="">
              <img src="codepen.png" alt="" width="32" height="32" /> </a>
          </div>
        </div>
      </div>
      <div class="mainabout">
        <h1>About Me</h1>

        <div class="about-bubble">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae odio non ipsa perspiciatis vel perferendis at obcaecati repellat molestiae, autem quas dolores nostrum totam corrupti quod beatae, accusamus commodi enim?</p>
        </div>
      </div>
      <div class="next-bttn">
        <form action="work.html">
          <button style="background: white;">Next</button>
        </form>
      </div>
    </section>

webpage

Upvotes: 1

Answers (2)

Emma Marshall

Reputation: 352

Since the paragraph is enclose by about-bubble div class with width of 100% you can make <p> have width of 90% so it won't overflow passthrough the bubble border

p {
width: 90%;
}

now text would not overflow from rigth side but would overflow on bottom so the solution is use display: block; so it would become dynamic/ not overflowing when browser is resize for example this

.block {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0px;
  text-align: center;
  display: block;
  padding: 5px 5px 5px 5px;
  line-height: 150%;
  border: 2px solid #000000;
  border-radius: 5px;
  background-color: #FFA500;
  margin: auto auto auto auto;
  width: 50%;
}

<div class='block logoerror'>&#x2620; Phasellus sed posuere tincidunt bibendum natoque ultricies si elementum tiam maximus tristique natoque suspendisse pretium proin vestibulum accumsan curabitur. Convallis augue velit erat sodales eget mauris dis curabitur suscipit si proin. Natoque auctor felis fermentum suspendisse neque nisi habitasse volutpat diam ad eleifend.</li><li>Feugiat platea a letius semper diam ex lorem netus nec efficitur posuere. Convallis consequat iaculis auctor dolor tristique nulla integer.</li><li>Platea rhoncus vivamus tempor inceptos per pharetra vehicula.. &#x2620;</div><br>

Upvotes: 2

znxr

Reputation: 71

Add the following to that bubble div in its respective CSS:

replacethisforbubble {
    word-break: break-all;
}

Try this, if it doesn't work let me know.

Upvotes: 0

Unable to fit text within div bubble

Answers (2)

Related Questions