[Resolved] WP Show Post List Layout

[riz]

Hi Team,

I have another issue with WP Show Post Layout. I need to make a list layout, but only need to show one post. I copied the css code from Dispatch as this

@media (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .wpsp-align .wp-show-posts-inner>div   {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 768px) and (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
        margin-right: 1.5em;
    }
}

Then add this code to the HTML Blocks:

<div class="wpsp-align">I put my WPSP shoretcode here</div>

But it’s not working as on Dispatch.
Please check the link below. The goal is to make the layout like the second section (Image in the first column, then Title, Excerpt and Read more button in the right column).

Thank you.

[Elvin]

Hi there,

I can see that the CSS you’ve provided is actually having some effect on the WPSP list but I’m not exactly sure what’s the layout you were trying to achieve.

Can you provide a mockup image of how you want things to be laid out?

[riz]

Hi Elvin,

Please see below.

Thank you.

[Elvin]

I see.

It’s a bit tricky to do but can you try adding this PHP snippet?

add_action('wpsp_before_header',function(){
    echo '<div class="wpsp-content-wrapper">';
},1);

add_action('wpsp_after_content',function(){
    echo '</div>';
},1);

It’s to add wrapper to the contents so we can do the desired layout. Let us know when it’s applied so we can recheck the site and provide the necessary CSS writeup.

[riz]

Hi Elvin,

Yes, it is done. Let me know the next steps.
Thank you.

[Elvin]

I mistyped the priority for this one:

add_action('wpsp_before_header',function(){
    echo '<div class="wpsp-content-wrapper">';
},1);

Can you change 1 to 11?

It should be like this:

add_action('wpsp_before_header',function(){
    echo '<div class="wpsp-content-wrapper">';
},11);

Also,

Change the priority of this:

add_action('wpsp_after_content',function(){
    echo '</div>';
},1);

to this:

add_action('wpsp_after_content',function(){
    echo '</div>';
},6);

Yes, it is done. Let me know the next steps.

You then add this CSS:

section#wpsp-239 .wp-show-posts-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
}

section#wpsp-239 .wpsp-content-wrapper {
    display: flex;
    flex-direction: column;
}

[riz]

Perfect!

Thank you very much Elvin. Great support as all always.

Thumbs up to all GP team!

[Elvin]

No problem. Glad you got it sorted. 😀

[Author]

Posts