[Resolved] Hero image and categories in WPSP

[Liran]

Hey,

I was able to design something similar to this in WPSP. However, my Hero image is too small and wide on mobile. Also, how can I show the category like in the example URL?

Any help would be greatly appreciated!

[Ying]

Hi Liran,

You could try this CSS to give the hero image a specific height:

@media (max-width: 768px) {
    .wpsp-card .wp-show-posts-image img {
        height: 300px;
    }
}

You should be able to activate the terms in WP Show Posts:
https://www.screencast.com/t/MM7vzIrj2F6H

Let me know 🙂

[Liran]

Hey Ying,

You could try this CSS to give the hero image a specific height:

Thanks, that looks great!

You should be able to activate the terms in WP Show Posts:

Sure, but how do I move the category name to the middle of the card?

[Leo]

Can you link us to the page in question to see what you have so far?

[Liran]

Hey Leo,

Link is in the private box.

[Elvin]

Hi there,

Thanks. Please see my reply here – https://wpshowposts.com/support/topic/color-code-categories/#post-30047

[Liran]

Thank you. Still no answer, though.

Leo, did you manage to figure it out?

[Elvin]

Have you sorted this out?

Are you pertaining to the container of the hero texts?

If that’s it, you have this CSS that prevents the container from going past 345px.

@media (max-width: 768px){
.wpsp-overlap .wp-show-posts-image+.wpsp-content-wrap {
    max-width: 345px;
}
}

Or perhaps I’m missing something. Can you explain a bit more?

Let us know.

[Liran]

All good Elvin, thank you!

[Elvin]

Nice one. No problem. 😀

[Author]

Posts