Headings Won't Wrap in Tablet

HTML & CSS
1

I’m trying to convert a WordPress site so that it is responsive. The homepage has image boxes (four across) with titles under each box. The box’s content is revealed in an overlay on mouse hover. On my tablet, the titles are not wrapping, so they are sticking out beyond the edges of the boxes and pushing the other boxes over and down.

This is what the boxes look like on a laptop:

1366×738 357 KB

The html structure for each box is:

<article class="post">
    <div class="overlay">
        <img width="275" height="275" src="imageURL" class="attachment-thumbnail wp-post-image" alt="" />            
        <p class="date">2 months ago</p>
    </div><!-- end of .overlay -->
    <h3><a href="#">This is a Really Long Heading for the Featured Article</a></h3>    
    <div class="box-content">
        <p>
            This is where the excerpt of the article content goes. It is restricted to 30 words 
            before it is cut off and the reader is referred to the entire article [&hellip;]
        </p>
        <p class="readmore"><a href="#"> Read more...</a></p>
    </div><!-- end of .box-content -->            
</article><!-- end of .post -->

The CSS for the larger screens is:

   .sport-features .post {
        position: relative;
        width: 17.6vw;
        float: left;
        margin-right: 1.7%;
        font-size: 0.75rem;
    }

    .sport-features .post:last-child {
        margin-right: 0;
    }
    
    .sport-features .overlay {
        position: relative;
        width: 17.6vw;
        height: 17.6vw;
    }
    
    .sport-features img {
        width: 17.6vw;
        height: 17.6vw;
    }
    
    .sport-features .date {
        display: inline-block;
        position: absolute;
        top: 83%;
        left: -5px;
        height: 20px;
        background: #10448d;
        font-family: 'Lora', Cambria, Georgia, serif;
        color: #fff;    
        padding: 3px 10px 3px 15px;
    }

    .sport-features h3 {
        width: 17.6vw;
        padding-bottom: 30px;
        font-size: 1rem;
        color: #C00204;
    }

    .sport-features .box-content {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        padding: 4.2%;
        width: 16.5vw;
        height: 16.5vw;
        top: 0;
        left: 0;
        z-index: 10;
        opacity: 0;
    }

    .sport-features div.box-content:hover {
        opacity: 1;
        -webkit-transition: opacity 0.5s ease-in;
         -moz-transition: opacity 0.5s ease-in;
         -o-transition: opacity 0.5s ease-in;
         -ms-transition: opacity 0.5s ease-in;
         transition: opacity 0.5s ease-in;
    }

    .sport-features .box-content .readmore {
        text-align: center;
    }

    .sport-features .box-content .readmore a {
        display: inline-block;
        color: #fff;
        background: #506884;
        padding: 3px 5px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
    }

    .sport-features .box-content .readmore a:hover {
        background: #10448D;
    }

This is what the headings look like on the tablet:

960×650 134 KB

Why would the <h3> headings not wrap on a tablet? I tried putting a width on them and that didn’t help.

What can I do to keep them confined to the width of the boxes?

2

I’m not sure, but my first thought is, what happens if you put the h3 inside the .overlay div?

3

The trouble is that some headings are longer than others, so I can’t keep my boxes a consistent square size if some headings are one line long, and others are two or three lines long.

4

Using the code that you posted (plus a red dashed outline that I added to .post), this is what I see in Firefox and Chrome (desktop), so we must be missing something… some unique bit of information, maybe in a media query or other stylesheet?

5

Chrome has a device toggle that will allow you to view the page in a tablet viewport and still inspect the elements. I would look for a parent element that is present in the tablet that wasn’t in the desktop view. It could be a result of a media query that may be hard to find in the WP theme.

Here’s a screenshot to show where it is.

Once it’s toggled on, you can select from several devices from a dropdown at the top.

6

Thanks for the suggestion, but that is a custom theme that I developed for the site owner. There isn’t anything hidden there, and I’m just starting with the media queries.

I’m going to get a live prototype up on a server so it is easier for you to see what I mean.

1 Like
7

This may have nothing to do with your issue but some older devices don’t support the VW unit so they would get no width on the floats. You should use a backup width in percentage (or whatever suits the layout).

8

How old? This is a Samsung Tablet which is about 3 years old.

Thanks for the suggestion - I will try adding a percentage also. If I put it right before the vw width, those tablets will pick up the percentage and ignore the vw, right? But all other devices will do the percentage first then change to the vw? How much will that affect performance?

9

Yes.

Not very much. But if % does the trick, do you even need the vw after it?

10

Yes place the fallback width before the vw width and browsers that don’t understand vw will use the percentage instead.

It will have nil effect on performance (or at least it would be so small that it would be impossible to quantify in any real terms. Remember pages are littered with hundreds of web prefixes and they make almost no difference at all to performance. If you had a few thousand of them then the css file would take longer to download and parse.:smile:

11

I need the vw because I need to keep the boxes square, so I put the same size on both the width and the height of the box.

12

You can make square boxes without vw. Just use percentage padding-top as vertical padding still refers to the width of the containing block.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:1240px;
	margin:auto;
}
.box {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:21%;
	margin:2%;
	padding-top:21%;
	position:relative;
	float:left;
	overflow:hidden;
}
.box img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
		<div class="box"><img src="http://placehold.it/350x350"></div>
</div>
</body>
</html>
13

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