In line title blocks look off on mobile

Hi Oliver,

It's quite tricky on mobile, give this CSS a try:

@media (max-width: 768px) {
    .gb-container.inline-post-meta-area p {
        white-space: nowrap;
        max-width: 100%;
    }
    .gb-container.inline-post-meta-area p:last-child {
        white-space: inherit;
    }
    .gb-container.inline-post-meta-area >.gb-inside-container {
        flex-wrap: wrap;
    }
}

Hi Ying!
It somewhat helped but still looks kind of chopped off. The second and third title blocks have a blank space at the beginning and they don´t begin with caps. Would a code snippet that could output the post terms be a better idea since it wouldn´t be three title blocks like it is now? thus breaking more naturally

Hi Oliver,

Yes, that would be one solution.

An alternative would be to turn your paragraph blocks into a span.

To do this, add make-span class to the CSS class list of the Headline blocks in their advanced section. Then, add this PHP snippet:

function db_rerender_paragraph( $block_content, $block ) {
		if ( ! is_admin() && ! empty( $block['attrs']['className'] ) && 'make-span' === $block['attrs']['className']  ) {
			
			$my_search='<p';
			$my_replace='<span';
			$new_content = str_replace($my_search, $my_replace, $block_content);
			$my_search2='p>';
			$my_replace2='span>';
			$new_content2 = str_replace($my_search2, $my_replace2, $new_content);
			return $new_content2;
		} 
	
    return $block_content;
}
 
add_filter( 'render_block', 'db_rerender_paragraph', 10, 2 );

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Hope this helps!

Hi Fernando,
nothing really happened after giving the title blocks the make-span class and creating a code snippet with the code you provided

I deleted the cache and all

just to make sure, what I´m trying to do is output all the terms in one line after_content maybe there is a better solution to the title blocks?

Try adding this CSS so that the container isn’t set to flex:

.gb-container.inline-post-meta-area > .gb-inside-container {
    display:block;
}

The PHP should work afterwards.

I added the CSS and the first and second title blocks look good (they break naturally), the third still looks like before.

Would it be easier for you to log in and check?

No, it’s alright.

How are you adding the term meta in your Headline Block? Is it through the dynamic feature in the Block settings? Example: https://share.getcloudapp.com/xQuwkb67

If not, can you retrieve the categories as such?

Kindly let us know.

I can´t use the option dynamic content on the right (block) because the terms are somehow not shown for me to choose and more importantly I can´t seem to write the text before the dynamic info like Written by -dynamic info (name)– on -dynamic info (date) – under -dynamic info category

I duplicated the current container with the title blocks to use the dynamic options in the block settings. As you can see, the categories i somehow can´t select

I see. Can you try removing dynamic-term-class in the class list of that specific Headline block?

Perfect, that did it! Thank you very much man and have a great day!

You’re welcome Oliver. I believe you can remove the previous CSS you added at the very top.

Do you mean Ying´s? ok I will, thanks again!

Yes, I think it can be removed. You can try and see if something changes.

I did and everything stays perfectly fine. Thank you