Recent posts element sizing

Support
#1

Hi, I have added a ‘classic recent posts’ element to my page but the size of the image container is not right for my featured images. How can I change it?

I also want to remove the hover effect and the border.

Can you help please?

#2

Hello Loren,

Thanks for asking. :slight_smile:

You can add following CSS under X/Pro > Theme Options > CSS:

.x-recent-posts .x-recent-posts-img {
    width: 50%;
    margin: 0 auto;
}

.x-recent-posts a, .x-recent-posts a:hover {
    color: #382e2e !important;
}

.x-recent-posts a:hover .no-post-thumbnail .x-recent-posts-img:before{display: none;}

.x-recent-posts a {
    border: 0;
    box-shadow: none;
}

Here are some related links for further reading:

Hope this helps.

#3

That just makes the image smaller. And the hover still exists.

I’d like the container to be bigger (height) so the image fits.

#4

Hi Loren,

Please change this

.x-recent-posts .x-recent-posts-img {
    width: 50%;
    margin: 0 auto;
}

to this

.x-recent-posts .x-recent-posts-img {
    width: 50%;
    margin: 0 auto;
    padding-bottom: 100%;
}

Then change this

.x-recent-posts a:hover .no-post-thumbnail .x-recent-posts-img:before{display: none;}

with this

.x-recent-posts a:hover .x-recent-posts-img:before{display: none;}

Thanks!

#5

Thats made it worse. Now the images are cut off left and right.

The hover effect is still there, just without the icon.

And, on the blog archive page, can we do the same and remove the hover effect?

#6

Hi Loren,

Would you mind providing the URL of the page you are working on so that we can tailor the code suggestion to your setup?

Thank you.

#7

Yes, I can. It has a ‘holding’ page on the front end so I’ll set up a login.

It’s on https://thewebsiteschool.co.uk

#8

Hi Loren,

Please change the following custom CSS rule,

.x-recent-posts .x-recent-posts-img {
    width: 50%;
    margin: 0 auto;
    padding-bottom: 100%;
}

To this:

.x-recent-posts .x-recent-posts-img {
    width: auto;
    margin: 0 auto;
    padding-bottom: 100%;
}

Then to remove hover effect, add the following CSS rule into your X -> Theme Options -> CSS area.

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img::after {
    opacity: 0;
}

For the archive pages, please add the following CSS rules as well.

.archive a.entry-thumb:hover img {
    opacity: 1;
}
.archive a.entry-thumb:hover::before {
    opacity: 0;
}

Hope that helps.

#9

The homepage ‘recent posts’ element is great now. Thanks.

But, the archive page still has hover effects.

#10

Hi Loren,

Please try adding these codes:

a.entry-thumb:hover:before {
    display: none;
}

a.entry-thumb:hover img {
    opacity: 1;
}

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.