Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Flip Image Location On Every Other Recent Post on Homepage

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

Looking to take your front page in a more custom look where you will separate yourself from others who run Acabado? This Custom CSS will set up your posts on the homepage “Recent Posts” section to swap sides on every other post giving a more customized appearance to your blog.

We also configure it within the CSS to only display this was on displays larger than 1024px, this way the mobile site will not display awkwardly.

/* Media Query Means Only Shows This way on 1024px width displays */
@media (min-width: 1024px) {
/* Alternating Recent Posts */
.article-card:nth-child(2n).horizontal .image-container {
    float: right;
}

/* Pad Excerpt To Give a slight gap to image */
.article-card .excerpt {
    margin-right: 35px;
}
}

The look of this is shown below (Cicle Images is a different CSS set)

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

2 thoughts on “Flip Image Location On Every Other Recent Post on Homepage

  1. Hello,

    Thanks a lot, however, when I apply the code in CSS, all posts are moving one side – no alternation. What could be the issue?

    1. Then you have a break in your CSS somewhere, I have tested this in each version without other code. Make sure when you include the media code you are looking at it on a screen wider than the resolution you put.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content