Media + Text Box with multi-line text not working?

Are you using the latest version of Tracks? If not, please update via the Appearance menu.

This was a bug in a previous version but should be fixed now.

I am using Tracks Version: 1.72, which appears to be the latest as I don’t see an update available.

Aha, they changed the classes and the error returns ???♂?

Sorry for that. This CSS will work to fix the line height so that the text doesn’t collapse on itself:

.wp-block-media-text.alignwide {
  line-height: 1.5;
}

Thanks! That indeed fixed the collapsing text, but I noticed the text line breaks farther from the edge of the post when it’s part of a Media + Text block than a normal text block.

The result is something like this:

-----------SAMPLE POST----------- <- Edge of post is here.

Here is some text in a standard
text box which includes some
line breaks.

[                ] Here is
[  Media + Text  ] how text 
[                ] breaks
[                ] away from
[                ] the right
[                ] edge.

Is this expected?

The columns have some padding within them, but you can remove that from the right side using this CSS:

.wp-block-media-text .wp-block-media-text__content {
  padding-right: 0;
}

Thanks Ben, tried this and it did improve, but the extra padding on the right side of the text is still noticeably more with the media+text element than it is with just normal text. Is that just the nature of the media+text element?

• This reply was modified 4 years, 8 months ago by kevinlambert.
• This reply was modified 4 years, 8 months ago by kevinlambert.

Could you link me to an example?

I think the remaining padding on the side could be caused by the fact that larger text means words need to break to the next line more often and are less likely to hit the very side of the container.

Hi Ben, I changed the text size to match the rest of the post, and the media + text element still has more padding than just standard text with a left or right-aligned image. Here’s the example:

https://kevinlambert.com/image-text-padding-example

Notice the difference in padding between the two examples, and I have your additional CSS from above active.

Any ideas?

Thanks so much, love the theme!

• This reply was modified 4 years, 8 months ago by kevinlambert.

Thanks for the link!

I see what’s happening now, and this code should fix the remaining space on the right side:

.post-content .wp-block-media-text {
  max-width: 100%;
}

Thanks Ben, I added that snippet, but it didn’t seem to change anything. ??

Here’s what I currently have in the CSS related to media-text:

.post-content .wp-block-media-text {
  max-width: 100%;
}
.wp-block-media-text .wp-block-media-text__content {
  padding-right: 0;
}

The test link is the same as above.

Any ideas?

Sorry about that. Let’s try this instead:

.entry-content .wp-block-media-text {
  max-width: 100%;
}
.wp-block-media-text .wp-block-media-text__content {
  padding-right: 0;
}

That did the trick! It had a side effect of making the image larger in the M+T control, but I adjusted it back down and everything looked the same.

Thanks SO much for your help! ??

I was reading about the benefits of the Pro version of Tracks, and all the features make sense – but I was wondering specifically about the feature that gives you greater control over featured image sizing.

In the free version, you can’t always get pixel-perfect versions of the images exactly as you want them in all cases as they will sometimes be cropped at the top and bottom. I’m curious how the pro version addresses this and allows pixel-perfect image sizing in these cases.

Great! Glad that latest snippet worked out.

The Pro version has a Featured Image Sizing option that works well for the post pages and the archive pages if the full-width post layout is used. It will give you 9 different aspect ratios to choose from as well as a “Natural Dimensions” option that will show the Featured Images uncropped. The option can be set from the Customizer to affect all posts and pages, and it can be overridden from an option in the post editor to change the size of specific Featured Images.