CODEWITHSUNDEEP
htmlcss
F4-E
F4-E

Reputation: 47

Text overflowing when browser resizes

1) Any idea how can I stop that text from overflowing when browser resizes? I have a photo in wider screens but when the width gets smaller I give the div a background color and set the browser not to display the picture.

enter image description here

2) Also,for some reason,when I'm making a change on section.welcome h1,p elements,this change is applied to the p elements of the .content section as well which is below .welcome.

I think the problem is with the code that displays the text over the image. When I commented it out,the text wouldn't overflow at all but I would also have to completely remove the image even for wider screen sizes.

HTML Code:

html,
body {
  background-color: rgb(250, 250, 250);
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  background-color: #1A212B;
  display: flex;
  padding: 15px;
  color: white;
  z-index: 1;
}

.navlink-brand {
  font-size: 1.5em;
  margin-right: auto;
}

.navlink {
  padding-right: 8px;
}

.navlink a {
  font-size: 1.1em;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: 0.2s;
  font-weight: 500;
  cursor: pointer;
  font-weight: lighter;
}

.navlink a:hover {
  color: #707A85;
}

.navItems {
  display: flex;
  align-items: center;
}

.navlink-Toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .navItems,
  .navbar {
    flex-direction: column;
  }
  .navItems {
    display: none;
  }
  .navToggleShow {
    display: flex;
  }
  .navlink-Toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
  .navlink {
    margin: 10px;
  }
  .navlink-brand {
    margin-left: 0;
  }
}

.welcome {
  text-align: center;
  width: 100%;
  min-height: 100%;
  height: auto;
  position: relative;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 800px) {
  .welcome {
    min-height: 25vh;
    background-color: #707A85;
  }
  .welcome img {
    display: none;
  }
}


/*center welcome text,above img*/

.welcome>.welcIn {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}

.welcome img {
  opacity: 0.8;
  max-width: 100%;
  width: auto;
  height: auto;
}

.welcome h1 {
  text-shadow: 6px 6px px #1A212B;
  font-weight: 900;
  font-size: 2em;
}

.welcome p {
  text-shadow: 6px 6px 6px #1A212B;
  font-weight: 900;
  font-size: 1.1em;
}

.welcome h1,
p {
  font-size: 3em;
  color: rgb(255, 255, 255);
  margin: 15px 0;
  line-height: 1;
}


/*for sticky footer*/

.all-wrapper {
  flex: 1 0 auto;
}

.content {
  width: 60%;
  margin: auto;
}

.content h2 {
  color: black;
  text-align: center;
}

.content p {
  color: black;
  font-size: 18px;
  line-height: 20px;
  word-wrap: break-word;
  text-align: left;
}

footer {
  flex-shrink: 0;
  border: solid 1px #1A212B;
  width: 100%;
  height: 50px;
  background-color: #1A212B;
}


/*footer p*/

.last {
  text-align: right;
  color: rgb(255, 255, 255);
  margin: 0 10px;
  line-height: 50px;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="all-wrapper">
    <div class="navbar"> //nav here
    </div>

    <main>
      <section class="welcome">
        <img src="header.png">
        <div class="welcIn">
          <h1>Welcome to </h1>
          <p class="descr">A website where you can .</p>
        </div>
      </section>

      <section class="content">
        <h2>Text text text text text</h2>
        <p>Text text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text text</p>
        <p>Text text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text text</p>
        <p>Text text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text texte</p>
      </section>

    </main>
  </div>
  <footer>
    <div class="last"></div>
  </footer>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 1

Views: 65

Answers (2)

Jose A. Ayll&#243;n
Jose A. Ayll&#243;n

Reputation: 886

The problem comes because you're adding .welcIn with an absolute position and then translating it. The parent cannot get the height from the child.

You can try to remove that position: absolute and the transform: translate(-50%, -50%);. Then add a little bit of padding and that will help.

html,
body {
  background-color: rgb(250, 250, 250);
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  min-height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  background-color: #1A212B;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  color: white;
  z-index: 1;
}

.navlink-brand {
  font-size: 1.5em;
  margin-right: auto;
}

.navlink {
  padding-right: 8px;
}

.navlink a {
  font-size: 1.1em;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  font-weight: 500;
  cursor: pointer;
  font-weight: lighter;
}
.navlink a:hover {
  color: #707A85;
}
.navItems {
  display: flex;
  align-items: center;
}
.navlink-Toggle {
  display: none;
}
@media only screen and (max-width: 768px) {
  .navItems,
  .navbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .navItems {
    display: none;
  }
  .navToggleShow {
    display: flex;
  }
  .navlink-Toggle {
  -ms-flex-item-align: end;
  align-self: flex-end;
  align-self: flex-end;
  display: initial;
  position: absolute;
  cursor: pointer;
  }
  .navlink {
    margin: 10px;
  }
  .navlink-brand {
    margin-left: 0;
  }
}

.welcome {
  text-align: center;
  width: 100%;
  min-height: 100%;
  height: auto;
  position: relative;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 800px) {
  .welcome {
    background-color: #707A85;
  }
  .welcome img {
    display: none;
  }
}


/*center welcome text,above img*/

.welcome>.welcIn {
   padding: 20px 0;
}

.welcome img {
  opacity: 0.8;
  max-width: 100%;
  width: auto;
  height: auto;
}

.welcome h1 {
  text-shadow: 6px 6px px #1A212B;
  font-weight: 900;
  font-size: 2em;
}

.welcome p {
  text-shadow: 6px 6px 6px #1A212B;
  font-weight: 900;
  font-size: 1.1em;
}

.welcome h1,
p {
  font-size: 3em;
  color: rgb(255, 255, 255);
  margin: 15px 0;
  line-height: 1;
}


/*for sticky footer*/

.all-wrapper {
  flex: 1 0 auto;
}

.content {
  width: 60%;
  margin: auto;
}

.content h2 {
  color: black;
  text-align: center;
}

.content p {
  color: black;
  font-size: 18px;
  line-height: 20px;
  word-wrap: break-word;
  text-align: left;
}

footer {
  flex-shrink: 0;
  border: solid 1px #1A212B;
  width: 100%;
  height: 50px;
  background-color: #1A212B;
}


/*footer p*/

.last {
  text-align: right;
  color: rgb(255, 255, 255);
  margin: 0 10px;
  line-height: 50px;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="all-wrapper">
    <div class="navbar"> //nav here
    </div>
    <main>
      <section class="welcome">
        <img src="header.png">
        <div class="welcIn">
          <h1>Welcome to </h1>
          <p class="descr">A website where you can .</p>
        </div>
      </section>
      <section class="content">
        <h2>Text text text text text</h2>
        <p>Text text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text text</p>
        <p>Text text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text text</p>
        <p>Text text text textText text text textText text text textText text text textText text text textText text text textText text text textText text text texte</p>
      </section>
    </main>
  </div>
  <footer>
    <div class="last"></div>
  </footer>
  <script src="script.js"></script>
</body>
</html>

Upvotes: 1

Deja
Deja

Reputation: 35

Have you tried adding overflow: auto; to the css that is overflowing? Possibly media or a specific section.

Upvotes: 0

Related Questions