[Support request] Author info dynamic change

[Stratos]

After following a tutorial you provided I created the following row to appear under the main title of each of my post. I provide an image below on how it looks right now.

PHOTO

The problem I have is that when i use a device like a smartphone that has limited width this doesn’t look good. What I want is to be like in the image when there is enough space but when there is not, the category at the end and the year at the date to disappear in order to make room for the rest to show as they should in a single line.

Is this possible?

[Ying]

the category at the end and the year at the date to disappear in order to make room for the rest to show as they should in a single line.

This requires custom JavaScript which is out of the scope of the support forum.

Do you consider letting them wrap to the next row on mobile?

[Stratos]

Can you please check the website link I provide? It is from where I saw exactly what I want to do.

[David]

Hi there,

select the Container Block with the author meta inside.
Select the WRAP > Wrap option. And set the ROW Gap to 10px.

This will allow items to wrap to new lines where there is no space for them inline.

[Stratos]

So WRAP is the only option? It cannot be done the way they did it in the other website?

[Fernando]

The other website is also wrapping the text if it’s too long. Is there something different you want to achieve when the author name or anything is too long in the post meta?

[Stratos]

In the other website when I am looking at a post from my smartphone in portrait mode it shows only the Author’s photo, name and date. The category at the end disappears completely. It is not wrapping. When I turn my smartphone in landscape then the category at the end re-appears.

[David]

If you select a block and in its block settings Advanced -> Additional CSS Classes.
You can add a GP Hide on Class ( or use the GenerateBlocks Pro toggles ) to remove an item on a certain screen size. See here:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Stratos]

This could work. But I do not want the block to hide on specific devices. I want it to hide if it doesn’t fit. Because when I have my smartphone in landscape it has enough space to show. In portrait mode it doesn’t have enough space and it forces to wrap.

Can you help me a little with the CSS code?

[Leo]

In that case, you can add a custom class like hide-on to the element with this CSS:

@media (max-width: 768px) {
    .hide-on {
        display: none;
    }
}

Adjust the 768px as you see fit.

[Author]

Posts