CODEWITHSUNDEEP
htmlcss
Ridza mnto
Ridza mnto

Reputation: 1

How to make a text stay inside a div?

The problem occurs when I resize the window into a smaller one. When the window is small it becomes like this. But when the window size is maximized it appears like I intended it to be like this

Here is my html and css:

.highlight {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.highlight-item {
  padding: 0px;
  font-family: Candara;
}

.highlight-item:hover {
  opacity: 0.85;
}

.highlight-item img {
  width: 100%;
  float: left;
  position: relative;
  z-index: -5;
}

.highlight-des {
  background: linear-gradient(0deg, rgba(2, 0, 36, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  position: relative;
  margin-top: 180px;
}

.highlight-des h1 {
  position: absolute;
  margin-top: 0%;
  font-size: 2em;
  font-weight: 300;
}

.highlight-des p {
  position: absolute;
  margin-top: 20%;
}
<div class="highlight">
  <div class="highlight-item col-4">
    <img src="images/highlight-mockup.jpg" alt="">
    <div class="highlight-des">
      <h1>Title</h1>
      <p>By: Author</p>
    </div>
  </div>
  <div class="highlight-item col-4">
    <img src="images/highlight-mockup.jpg" alt="">
    <div class="highlight-des">
      <h1>Title</h1>
      <p>By: Author</p>
    </div>
  </div>
  <div class="highlight-item col-4">
    <img src="images/highlight-mockup.jpg" alt="">
    <div class="highlight-des">
      <h1>Title</h1>
      <p>By: Author</p>
    </div>
  </div>
</div>

Last but not least, since this is a school project nothing but HTML and pure CSS is allowed, thanks, everyone!

Upvotes: 0

Views: 55

Answers (1)

Always Helping
Always Helping

Reputation: 14570

Here you go exactly you wanted. I have fixed you CSS a bit.

There was a problem with position and margins

Working JSFiddle

Run snippet to see it action.

.highlight {
  display: flex;
  flex-direction: row;
  position: relative;
}

.highlight-item {
  padding: 0px;
  font-family: Candara;
  width: 100%;
}

.highlight-item:hover {
  opacity: 0.85;
}

.highlight-item img {
  width: 100%;
  float: left;
  position: relative;
  z-index: -5;
}

.highlight-des {
  background: linear-gradient(0deg, rgba(2, 0, 36, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  position: relative;
  margin-top: 180px;
}

.highlight-des h1 {
  font-size: 2em;
  font-weight: 300;
}
<div class="highlight">
  <div class="highlight-item col-4">
    <img src="images/highlight-mockup.jpg" alt="">
    <div class="highlight-des">
      <h1>Title</h1>
      <p>By: Author</p>
    </div>
  </div>
  <div class="highlight-item col-4">
    <img src="images/highlight-mockup.jpg" alt="">
    <div class="highlight-des">
      <h1>Title</h1>
      <p>By: Author</p>
    </div>
  </div>
  <div class="highlight-item col-4">
    <img src="images/highlight-mockup.jpg" alt="">
    <div class="highlight-des">
      <h1>Title</h1>
      <p>By: Author</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions