When you write a title it’s a reasonably assumption that it is only going to take up one line. But that isn’t always the case and if the row is narrowed, the title may wrap onto a second line, pushing everything below it down the page and miss-aligning other elements in the row. Take a look at the layout below –

Single Line Long Long Title

Single Line Title

Single Line Title

The left hand title is a bit longer than the others and it wraps to two lines when the page is narrowed. You can easily see this by slowly resizing your browser, narrowing the page, until the left hand title wraps. The other two titles stay at one line until the page is narrow enough to force them to wrap onto two lines as well.

When the page is narrow enough for the ‘long’ title to wrap onto a second line, but still wide enough that the other two titles can still be displayed on one line, objects below the long title are forced down, temporarily misaligning them relative to the other columns.

Of course, the grid layout used here has these items arranged as columns within a single row –

which is a very natural way to do this because the mobile layout works well and gives a title-imag- title-image-title-image pattern. Nonethless, the title wrapping issue could be ‘solved’ by giving the titles and images their own rows. In other words, a row for titles and a row for images. The problem with this approach is that the mobile layout would no longer work. It would give title-title-title-image-image-image.

So what we do is simply to pre-allocate more vertical space to these titles. That way, when they need to wrap onto a second line, they expand into this reservior of space and do not push the image down. Just add this to the style.css in your child theme…..

.grid-title {
    min-height:3.2em !important;
    margin-bottom:0.5em !important; 

and then attach ‘grid-title’ to the CSS Class of the Custom CSS dialog for EACH of the three titles…..

If you use Inspect to compare the two layouts, what the CSS does is to increase the height of the DIV that grid-title is targetting but decrease the space beneath it, the margin-bottom. So, in fact, the overall effect is not much different in terms of what this looks like. However, when the page is narrowed now, the text has more space to flow into when it wraps. Try resizing your browser to make the page a bit narrower…. and compare the behavior of the row of titled images below with the earlier example…… When the left (longer) title wraps in the example below it should just expand into the space you have already allocated for it and NOT push the left hand image down the page, avoiding misalignment of the images.

You might need to adjust the numbers in the CSS code to your circumstances…. 🙂

Single Line Long Long Title

Single Line Title

Single Line Title

There are a couple of things to note about this approach. First, it is limited. If the text wraps more than once, the misalignment will return. This is because we are only pre-allocating a limited amount of additional space for the text to flow into. This could be ‘fixed’ by making min-height bigger, but this will mean that, when not wrapping, the title will be further away from the object beneath it, from the image in our example.

The other observation is that we have used min-height instead of height to create the reservoir of space. The reason for this is that if we used height, we would have a problem if the line wrapping of the title caused the text to exceed the value of height that we had set. To put it in a slightly more abstract way, the height should be determined by the content. On the other hand, min-height is independent of the content.

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!