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.
<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>
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 […]
<p class="readmore"><a href="#"> Read more...</a></p>
</div><!-- end of .box-content -->
</article><!-- end of .post -->
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?
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.
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).
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?
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.