Help with Recent post CSS

Support
#1

Can you help me with the CSS for a the recent posts feed? I need help setting the photo to the side.

This is how it’s coming in.

This is how I’m trying to get it to look.

#2

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Theme Options > Global CSS area.

.x-recent-posts .x-recent-posts-img {
    width: 55%;
    float: left;
    margin-right: 1%;
}

Hope that helps.

#3

Thanks, how do I resize the image to fit better? Like in the photo?

#4

Hi there,

You can edit the width value so that the photo width will get smaller like this:

.x-recent-posts .x-recent-posts-img {
    width: 35%;
    float: left;
    margin-right: 1%;
}

.x-recent-posts a {
    padding-top: 0;
    padding-left: 0;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#5

Is there a way to resize the photo so it doesn’t get cut off but shrinks instead?

#6

Hello There,

To resize the photo, please update the css code and use this:

.x-recent-posts .x-recent-posts-img {
    width: 35%;
    float: left;
    margin-right: 1%;
    padding-bottom: 223px;
}

.x-recent-posts a {
    padding-top: 0;
    padding-left: 0;
}

We would loved to know if this has work for you. Thank you.

#7

I still cuts the image off. Also, I need to make the box shorter. How is that done?

#8

Hello There,

Please update the code and use this:

.x-recent-posts .x-recent-posts-img {
    width: 35%;
    float: left;
    margin-right: 1%;
    padding-bottom: 100px;
    background-size: contain;
    background-position: top left;
    border-radius: 0;
    min-height: 203px;
    max-height: 223px;
    overflow: hidden !important;
}

.x-recent-posts .x-recent-posts-content {
    float: right;
    width: 60%;
}

.x-recent-posts a {
    padding-top: 0;
    padding-left: 0;
}

Hope this helps.

#9

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