Simple Homepage layout using Sections

LOL your secrets safe with me ;-)

One slight issue - I was planning to have more than one row on the page.

I wanted to have the top row be image left, text right

Then all the other rows image right, text left.

The CSS you provided will flip the image/text order on all instances of the row item, right?

Maybe... probably ... it uses nth-child selectors to switch them around. Add a few more posts and let me know and ill take a look.

just added another...take a look

Aah ok for separate lists - try this, in the Additional Settings there should be a setting to add a CSS Class. Give it a class of row-reverse then change the CSS provided before for:

@media (min-width: 769px) {
    .wpsp-row.row-reverse .wp-show-posts-inner {
        flex-direction: row-reverse;
    }
}

Cool that worked...

to adjust the columns in the row-reverse ones, I've created this...sort of worked, but can you check please...

.wpsp-row.row-reverse .wp-show-posts-image
{
flex: 1 0 50%;
}

.wpsp-card.row-reverse wpsp-row .wpsp-content-wrap {
flex: 1 0 50%;
}

Try this:

.wpsp-row.row-reverse .wp-show-posts-image 
{
    flex: 1 0 50%;
}

.wpsp-card.row-reverse .wpsp-content-wrap {
    flex: 1 0 50%;
}

ok perfect, nearly there. How do I control..

- vertical space between pic and title
- horizontal space between rows

Thanks!

As each of the WPSP lists are in a Section you can add Top and Bottom Padding to the section to create space between rows.

On the bottom two rows you have a large space between the image and the Title/Meta because the image isn't big enough to fill the column,

Was going well until I shrunk down the screen to see how responsive the layout is! The top row is kind of ok, but the reverse-rows aren't responsive. Bummer.

Updated CSS here to fix that

That's superb...however, the bottom rows aren't left aligned with the top one? - something is making them indent?

I think this is it right...let me know if there's a more eloquent way of doing it. Thanks for all your help.

@media(min-width: 769px) {
.wpsp-row .wpsp-content-wrap {
padding-top: 0px !important;
padding-left: 15px !important;
padding-right: 9px !important;
}
}

@media(min-width: 769px) {
.wpsp-row.row-reverse .wpsp-content-wrap {
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 10px !important;
}
}

Check the WPSP settings image alignment and set it to left, it defaults to center, and the gap is there because the images aren't large enough for the container.

You can combine multiple CSS rules within the one Media query:

@media (min-width: 769px) {
    .css-rule-1 {
        /* Styles here */
    }
    .css-rule-2 {
        /* Styles here */
    }
    .css-rule-3 {
        /* Styles here */
    }
}

great thanks for all the help David