Customize Cards (Row style)

Tagged: cards, row

This topic has 12 replies, 5 voices, and was last updated 1 year, 6 months ago by elvin.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
April 17, 2019 at 4:10 am #8792

Alberto
Participant

Hi Tom
I want to do, if is possible, several changes in my Blog archive page.
I’m working with GPP (1.8) and WPSP (beta 1.0).
First, I’d like to display all the cards (post entries) with image in the left hand, not alternating the position.
I’d also like the date above the title.

Let me know if that is possible.

Thanks in advance.

Alberto

April 17, 2019 at 7:02 am #8794

Álvaro Góis dos Santos
Participant

Hi Alberto,

Sorry if I’m intruding, but I think this is a similar question to one that was answered in the GP forum to an issue I raised, it might be useful for you: https://generatepress.com/forums/topic/horizontal-blog-cards/

Regards,

Álvaro

April 17, 2019 at 10:22 pm #8809

Tom
Keymaster

Thanks, Álvaro! 🙂

April 23, 2019 at 2:27 am #8903
Alberto
Participant
Hello Álvaro.
Thanks a lot for your reply.
I appreciate your interest, but that solution doesn’t work for me.
I would have appreciated it more if Tom could see that it wasn’t the solution and that it was enough to change this CSS style rule:
```
.wpsp-row article:nth-child(2n) .wp-show-posts-inner{
		flex-direction: row;
	}
```
Cheers
April 23, 2019 at 6:39 pm #8938

Tom
Keymaster

Is that CSS working for you? If not, can you link me to your page so I can take a closer look?

September 19, 2021 at 1:06 am #33968

Victoria
Participant

Hi, I want to do a similar thing. I would like all images on the left and all the same size. This is for the sidebar.

Thank you

September 19, 2021 at 8:57 pm #33989

elvin
Moderator

Hi Victoria,

Can you link us to the page with the WPSP on the sidebar visible? So we can inspect and provide the CSS writeup for your site. 🙂

September 20, 2021 at 12:58 am #33993

Victoria
Participant

Sure,

Here is a post link. You’ll see 2 wp show post blocks, I haven’t touched the second one yet, but hopefully, they will match.

https://gardeningisgreat.com/companion-plants-for-pumpkins/

Thank you so much, I really appreciate your help.

September 20, 2021 at 1:17 am #34001
elvin
Moderator
Try adding this CSS:
```
.wpsp-row article:nth-child(even) .wp-show-posts-inner,
.wpsp-row article:nth-child(odd) .wp-show-posts-inner {
flex-direction: row !important;
}
```
This should turn all the WPSP lists with the card style “Row” have their images on the left side instead of alternating.

All you have to do on the 2nd one is to assign card style “Row” to it as well. 🙂
September 20, 2021 at 1:46 am #34005

Victoria
Participant

That worked thank you so much.

But how do I get it so that the size of the image does not change? It seems they change based on the length of the title.

Thank you for your help.

September 20, 2021 at 4:55 pm #34031
elvin
Moderator
Try adding this CSS to keep the relative aspect ratio.
```
.wp-show-posts-image img {
    object-fit: contain !important;
    width: 100%;
    height: auto;
}
```
September 21, 2021 at 3:37 am #34039

Victoria
Participant

That works perfectly.

Thank you so much

September 21, 2021 at 7:02 pm #34065

elvin
Moderator

No problem. 😀
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

[Support request] Customize Cards (Row style)