CODEWITHSUNDEEP
htmlcssflexbox
bloom bloom
bloom bloom

Reputation: 131

How to make text flow onto other div?

I am using flexbox. I am trying to make the text 'healthy meals' line up with food delivery. However the only problem is it is in two seperate divs.

I want my code to look like this.

enter image description here

I currently have this:

enter image description here

so my guess is that I need to make the text spill over to the next div. Anyone know how to do this?

Here is my code.

.mainheader {
  display: flex;
  justify-content: space-around;
  border: 2px solid green;
  width: 100%;
  background-image: url(./img/hero.jpg);
  height: 100vh;
}

.menu {
  display: inline-flex;
  border: 1px solid red;
  width: 70%;
  justify-content: space-around;
  margin-top: 25px;
}

.mainheader>div:first-child {
  border: 1px solid red;
  width: 40%;
  margin-left: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>omnifoods</title>
</head>

<body>

  <div class="mainheader">
    <div class="slogan">
      <h1>GoodBye Junk Food. <br> Hello Super Healthy Meals.</h1>
      <div class="butt">
        <button style="margin-right: 20px;">I'm hungry</button>
        <button>Show me more</button>
      </div>
    </div>
    <div class="menu">
      <div>Food Delivery</div>
      <div>How it works</div>
      <div>Our cities</div>
      <div>Sign up</div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 110

Answers (2)

kushal jain
kushal jain

Reputation: 85

white-space: nowrap;

add this to your slogan or h1 wherever you want. this might help you :)

Upvotes: 0

Derek Wang
Derek Wang

Reputation: 10194

Just add white-space: nowrap to h1 tag as follows and it will prevent the word break.

.mainheader {
  display: flex;
  justify-content: space-around;
  border: 2px solid green;
  width: 100%;
  background-image: url(./img/hero.jpg);
  height: 100vh;
}

.menu {
  display: inline-flex;
  border: 1px solid red;
  width: 70%;
  justify-content: space-around;
  margin-top: 25px;
}

.mainheader>div:first-child {
  border: 1px solid red;
  width: 40%;
  margin-left: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>omnifoods</title>
</head>

<body>

  <div class="mainheader">
    <div class="slogan">
      <h1 style="white-space: nowrap;">GoodBye Junk Food. <br> Hello Super Healthy Meals.</h1>
      <div class="butt">
        <button style="margin-right: 20px;">I'm hungry</button>
        <button>Show me more</button>
      </div>
    </div>
    <div class="menu">
      <div>Food Delivery</div>
      <div>How it works</div>
      <div>Our cities</div>
      <div>Sign up</div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions