[Support request] post layout

Any chance you could link us to the page in question? To check why it isn’t working.

You can send us the link on through contact page if you wish to keep it private.
https://wpshowposts.com/contact/

Thanks!

I’ve observed the site and the margin-top is actually applying but it’s only significantly noticable if the value is higher than 18px because the header actually has margin equal to this value.

Try this approach

section#wpsp-193 .wp-show-posts-entry-header {
    margin: 0 0 30px;
}

Let us know how it goes.

This is pretty tricky to do.

Do you want this applied on all WPSP lists?

If so, try this:

Use this PHP snippet to wrap the contents.

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

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

And use this CSS to make the image and the wrapped content to display in a row:

@media(max-width:767px){
    .wp-show-posts-inner {
        display: flex;
    }
}

If you want the exact same layout including the comments link position and the terms position, you may have to edit the plugin or completely disable them and hook your own layout on wpsp_after_content.

If you want it to be applied to the list on the right-hand side you’ll have to add specific id selectors to the CSS and add the WPSP ID to the hook.

Example: If there are multiple WPSP list on your sidebar.

add_action( 'wpsp_before_header', function( $settings ) {
    // Lists we're targeting, replace with actual list IDs.
    $lists = array(
        '123',
        '456',
        '789'
    );

    if ( in_array( $settings['list_id'], $lists ) {
        echo '<div class="content-wrapper">';
    }
} );

add_action('wpsp_after_content',function( $settings ){
    // Lists we're targeting, replace with actual list IDs.
    $lists = array(
        '123',
        '456',
        '789'
    );

    if ( in_array( $settings['list_id'], $lists ) {
        echo '</div>';
    }
});

And the CSS:

@media(max-width:767px){
    section#wpsp-123 .wp-show-posts-inner, section#wpsp-456 .wp-show-posts-inner, section#wpsp-789 .wp-show-posts-inner {
        display: flex;
    }
}

Note: You don’t need to make arrays if you only want to target one specific WPSP list.

Example:

add_action( 'wpsp_before_header', function( $settings ) {

    if ( 123 = $settings['list_id'] ) {
        echo '<div class="content-wrapper">';
    }
} );

add_action('wpsp_after_content',function( $settings ){

    if ( 123 = $settings['list_id'] ) {
        echo '</div>';
    }
});

And CSS:

@media(max-width:767px){
    section#wpsp-123 .wp-show-posts-inner {
        display: flex;
    }
}

Where 123 should be the WPSP list on your right side of the site.