Text disappears instead of wrapping when resizing to smaller screen-CodePudding

I'm having some trouble trying to make my text wrap when I resize my screen. For some reason instead of the text wrapping as I make the screen smaller, the words start to disappear instead of wrapping.

js:

export default function About() {
  return (
    <>
      <div className="about-hero">
        <h1> Making your shopping experience more enjoyable.</h1>
      </div>
    </>
  );
}

css:

*{
  box-sizing: border-box
}

.about-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),
    url("https://images.pexels.com/photos/301930/pexels-photo-301930.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #ffff;
  height: 50vh;
  line-height: 50vh;
 
}

.about-hero h1{
  word-wrap: break-word;
}

CodePudding user response：

*{
  box-sizing: border-box
}

.about-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),
    url("https://images.pexels.com/photos/301930/pexels-photo-301930.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #ffff;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

<div class="about-hero">
        <h1> Making your shopping experience more enjoyable.</h1>
</div>

CodePudding user response：

You have to add to the parent div .about-hero display: flex and make it flexible and align all the child elements horizontally and vertically

.about-hero should look like this

.about-hero{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),
    url("https://images.pexels.com/photos/301930/pexels-photo-301930.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #ffff;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}