[Support request] Simple Homepage layout using Sections

Home Forums Support [Support request] Simple Homepage layout using Sections

Home Forums Support Simple Homepage layout using Sections

Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #1007661
    gedosan

    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?

    #1007674
    David
    Staff
    Customer Support

    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.

    #1007679
    gedosan

    just added another…take a look

    #1007697
    David
    Staff
    Customer Support

    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;
        }
    }
    #1007705
    gedosan

    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%;
    }

    #1007711
    David
    Staff
    Customer Support

    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%;
    }
    #1007830
    gedosan

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

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

    Thanks!

    #1007840
    David
    Staff
    Customer Support

    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,

    #1007850
    gedosan

    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.

    #1007871
    David
    Staff
    Customer Support

    Updated CSS here to fix that

    #1007875
    gedosan

    That’s superb…however, the bottom rows aren’t left aligned with the top one? – something is making them indent?

    #1007896
    gedosan

    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;
    }
    }

    #1007897
    David
    Staff
    Customer Support

    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.

    #1007900
    David
    Staff
    Customer Support

    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 */
        }
    }
    #1008222
    gedosan

    great thanks for all the help David

Viewing 15 posts - 16 through 30 (of 31 total)
  • You must be logged in to reply to this topic.