Home Forums Weaver Show Posts & Show Sliders Show posts layout alternate FI left right

Topic Resolution: Resolved

This topic contains 6 replies, has 2 voices, and was last updated by  dnadesign 6 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #58676

    dnadesign
    Participant

    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)

     

    #58682

    scrambler
    Moderator

    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

    #58704

    dnadesign
    Participant

    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/

    #58707

    scrambler
    Moderator
    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;}
    #58717

    dnadesign
    Participant

    You’re amazing!!

    Thanks a million!

    #58718

    scrambler
    Moderator

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

    #58719

    dnadesign
    Participant

    Will do – Thanks again 🙂

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.