Show posts layout alternate FI left right

[dnadesignParticipant]

Hi Guys

Was wondering if the show posts option will allow me to alternate the Featured image for the excerpts to left and right – I am trying to achieve a similar layout to this page https://www.fch.co.za/

I’ll also have to fiddle with the padding of the images vs excerpts too get the images to line up nicely.

Any advice will be grateful

Weaver Xtreme 4.2.2 Options – Plus (3.1.1)

 

[scramblerModerator]

Show post wont help,, but we should be able to do that using Custom CSS.

Use Main options > Post Specifics > Featured Image > FI Location Excerpts  > Beside page/post no wrap

and

Main options > Post Specifics > Featured Image > > FI Alignment Excerpt > Left

Then add the rule below to your theme Global Custom CSS Rule box

.wvrx-posts a:nth-of-type(2n){float:right;}

If it does not do what you want, post back with the rule in place and a link to your page

[dnadesignParticipant]

Thanks Scrambler,

Worked perfectly on desktop, but not stacking on small phones, ideally I would like the FI to stack above the excerpt on small phones, and alternate left / right on desktop – Not sure if this is a possibility though?

Link is: http://cd2.dnaonline.co.za/

[scramblerModerator]

Change the rule I gave you to

.is-desktop .wvrx-posts a:nth-of-type(2n), .is-smalltablet .wvrx-posts a:nth-of-type(2n) {float:right;}
.is-phone .wvrx-posts > a {float:none !important;}

If you want the image centered on phone change to
.is-desktop .wvrx-posts a:nth-of-type(2n), .is-smalltablet .wvrx-posts a:nth-of-type(2n) {float:right;}
.is-phone .wvrx-posts > a {float:none !important;width:100%;display:inline-block;text-align:center;}
.is-phone .wvrx-posts > a img {float:none !important;}

[dnadesignParticipant]

You’re amazing!!

Thanks a million!

[scramblerModerator]

You should add left and right padding to the post area, as on phone it buts against the edges

[dnadesignParticipant]

Will do – Thanks again 🙂

[Author]

Posts