Getting h1 to line break when screen gets smaller

HTML & CSS
1

I have a div which contains an h1. When the div gets smaller than the width of the h1, the h1 moves below the div. I would like it instead to wrap and fill next line of the div

   <div class="blog-loop">

   <article id="post-1496" class="post-1496 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized content-post">
       <h1 class="post-title"><a href="#">Super Long Post Title</a></h1>
    </article>

</div>

Current CSS:

 .post-title {
  font-size: 16px;
  float: left;
  margin: 5px;
}

How can I keep the h1 in the div when it gets smaller?

2

Can you post a link to the page?

3

Here’s the link. Try resizing the window down and watch as the middle div title disappears

4

I see the lines disappearing exactly as described, but I cannot tell why it is happening… JS or media query or some combination thereof. Someone else will have to pitch in here.

5

I’m not sure if it has anything to do with JS because if I inspect element and just shorten the title, it pops back into view. I feel like it’s something to do with the width forcing it below the div…

6

It appears that it is being forced outside of the div because the text cannot wrap within the div. However, I don’t see overflow:hidden on the div and I can’t tell where white-space:nowrap is being applied to the h2 or the anchor. Disable the float on the h2 and the text wraps and stays within the div but it is no longer left aligned.

7

That actually pointed me in the right direction. I can just swap float: left for text-align: left and it works…

Still not sure why exactly but oh well…

8

It doesn’t seem logical… but when there are layers of CSS being applied it is sometimes hard to isolate the culprit. I hope you can find the actual cause of the problem or at least that it doesn’t bite you later

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.