How to center text on topic preview?

[nexo]

Hi, how can I vertically center (bring down) the title, category, and tag on the topic preview next to the image? Thanks.

[Arkshine]

What about simply:

.main-link {
    display: flex;
    align-items: center;
}

It should be okay in your case.

[nexo]

Thank you so much

[nexo]

I’ve noticed that while that works on Desktop, on mobile it remains the uncentered on mobile. (I’ve tried pasting the css into the mobile stylesheet)

[nexo]

Any discovery to this? I’ve been playing around with the code, but no luck

[Arkshine]

It’s a little more tricky.

I don’t know if it will work in all situations, but you can try and adjust the following:

For mobile only:

.topic-list-item {
    td {
        display: flex;
        align-items: center;
        max-width: 100%;
        position: relative;
    }
    
    .topic-details {
        flex: 2;
        
        display: flex;
        flex-direction: column;
        min-height: initial !important;
        position: initial !important;
        overflow: visible;
        
        .pull-right {
            position: absolute;
            right: 0;
            top: 0.5em;
            bottom: 0;
        }
        
        .num.activity {
            bottom: 0.5em;
        }
    }
    
    .topic-actions {
        flex: 0 0 100%;
    }
}

[nexo]

What a wonder! Thank you mate!

[nexo]

Another problem arises. The suggested topics table gets completely scattered/broken. Now what can be done I’ve played around with as much CSS as I know. vertical-align doesn’t work…

[Arkshine]

Can you show me a screenshot of what you mean?

[nexo]

[Arkshine]

Then, you should try to target only the main topics list.

What about replacing the selector by: .contents .topic-list-item { ? (note the .contents)

[nexo]

It works a lot better, I noticed that the post count and username of the latest poster gets overlapped when the topic title is 2 lines or longer.