In recent posts, how do I place the text to the right of the image?

Support
#1

Hi,

On the homepage of my site, I want to have the last three posts in vertical orientation. Currently the headline appears with the headlines and date below the image. Is there a way to have these texts to the right of the image? Is there something that can be added to the shortcode?

Also, is this a possible layout for the blog page itself?

Thanks,

Edahn

#2

Hello Edahn,

Thanks for writing in!

You can either display the post items vertically or horizontally. Regretfully there is no option to display the text to the right side of the image. It may be possible with custom css. Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)


.x-recent-posts .x-recent-posts-img {
    width: 26%;
    float: left;
    margin-right: 4%;
    padding-bottom: 55px !important;
    background-size: cover;
}

.x-recent-posts-content {
    float: left;
    width: 70%;
}

We would love to know if this has worked for you. Thank you.

#3

Thanks, I gave it a try, using a vertical layout, and adjusted it a little:

a.x-recent-post1.with-image .x-recent-posts-img {
background-size: 150% auto !important;
padding-bottom: 28%;
}.x-recent-posts .x-recent-posts-img {
width: 30%;
float: left;
margin-right: 0%;
padding-bottom: 150px !important;
background-size: cover;
}

.x-recent-posts-content {
float: left;
width: 30%;
}

It looked good in full width desktop mode. However on narrower screens the texts were cut off, although it did not fill the background cover.

All the best,

Edahn

#4

Hello Edahn,

In that case, you can update the code and use this instead:

@media(min-width: 980px) {
  .x-recent-posts .x-recent-posts-img {
    width: 26%;
    float: left;
    margin-right: 4%;
    padding-bottom: 55px !important;
    background-size: cover;
  }

  .x-recent-posts-content {
    float: left;
    width: 70%;
  }
}

This will make sure that the code will only take effect in wider screens. As soon as the screen goes smaller than 980, it will display the default styling.

Hope this helps.

#5

Great, this does the trick.

#6

Glad we could help.

Cheers!

#7

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