[Resolved] How to edit card layout, Would I like my cards to look like these?

Hi there,

Do you want to copy the exact same CSS styling done on these examples?

If yes, can you link us to the page you saw these? We can get the styling from there and convert it for. 🙂

You can send the details using our contact page – https://wpshowposts.com/contact/

Thank you.

The shadow effect and rounded corners can be done with this CSS:

.wp-show-posts-inner {
    box-shadow: 5px 5px 0 rgb(0 0 0 / 3%);
    border-radius: 9px 9px 9px 0;
}

The hover effect can be done with this –

.wp-show-posts-inner:hover img {
    transform: translateZ(0) scale(1.03,1.03);
}

.wp-show-posts-inner img {
    transition: transform .5s ease-in-out;
    filter: grayscale(1%);
}

As for the actual post layout, it’s pretty close to “Base” from the Cards style dropdown. You can try using that. 😀

I cannot increase the size of the featured post title.

Is it only for the featured post title? If so, you’ll have to do it with custom CSS.

Since the featured post is the first post, we can do something like this:

section#wpsp-123 article:first-child h2.wp-show-posts-entry-title a {
    font-size: 60px;
}

replace 123 with the wpsp list ID.

I cannot remove the two images (from the two boxes) below the featured posts

Are the posts below the featured post coming from the same list? Can you link me to the page in question?

I can’t shrink the space below the second column heading

I believe it was made that way to at least keep the same height for visual balance between the post cards. Are you trying to do otherwise?

Or perhaps, are you trying to make the images go the same height?

Note: this is tricky to deal with as we’ll have to consider the length of the title of the posts. Some are longer than others.

I can’t create a Trending, as in the first image.

Trending seems to be a sidebar. You’ll have to add a WPSP list there with a WPSP list setting only showing the post title and your preferred post meta (and w/o a card style).

Can you try adding same-height CSS class the left and right column container on test page/test-02/?

And then add this CSS:

.same-height .gb-inside-container,
.same-height .gb-inside-container section#wpsp-727{
    height: 100% !important;
}

This would be the result – https://share.getcloudapp.com/12uv0pxm

As for /test-01/

Consider changing the site of the image. This should automatically push down the 2 posts below it. Similar to /test-02/‘s layout.

Nice one. No problem. 😀