Weird margin on list – WP Show Posts

This topic has 7 replies, 2 voices, and was last updated 3 years, 10 months ago by Tom.

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

Author

Posts
October 21, 2019 at 1:13 am #11578

Bas
Participant

Hi,

I setup a test page to recreate a list with wp show posts from a custom coded list.
I used the cards base layout.

When I load the test page there is a weird margin of 20px to the left of the list.
When I remove that margin, the featured image is a few pixels short left and right although it is the correct size.

Maybe I am missing something, I can’t find the problem.

At the test page, the top list is from wp show posts and the bottom list is my custom coded list.

My questions are..

1 – How do I correct the left margin on the list.
2 – How do I recreate the image sizes so they are the same as my custom coded list.

Test page HERE

October 21, 2019 at 5:57 pm #11591
Tom
Keymaster
Hi there,

That margin is happening because of this CSS you’ve added:
```
.how-to.wp-show-posts-columns {
    margin-left: 0!important;
}
```
The negative margin on that element is needed to achieve the column gutters.

I’m not seeing any differences between images – can you explain a bit more?

Let me know 🙂
October 24, 2019 at 1:42 pm #11627

Bas
Participant

You kidding me… haha.

When I test CSS code, I put it at the top of the CSS file in order to tweak it until it is right, then I move it to it’s respected code group in the CSS file.
I guess I forgot about it.
Thanks for clearing this !

About the images…

I am looking for a way to control the size of the “smaller” images except the featured image.
Is it possible to give those images a specific width and height, conserving aspect ratio?

October 24, 2019 at 8:16 pm #11645

Tom
Keymaster

So just to confirm, you want to size the featured post image differently than the smaller posts in two columns?

Let me know 🙂

October 24, 2019 at 10:14 pm #11646

Bas
Participant

Yes sir,

I want to size the images in the 2 columns.
I set the size for the featured post in the image settings menu.

October 25, 2019 at 5:51 pm #11659
Tom
Keymaster
Can you give this a shot?:
```
add_filter( 'wpsp_image_attributes', function( $atts ) {
    // Set up our conditional
    if ( in_array( 'featured-column', get_post_class() ) ) {
        $atts[ 'width' ] = 1200;
        $atts[ 'height' ] = 400;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
} );
```
Let me know 🙂
November 18, 2019 at 10:26 am #11932

Bas
Participant

Hi, sorry for the late reply but I can’t seem to notice any changes.

I set the width and height in your snippet to 180

you can see the result HERE

November 18, 2019 at 5:19 pm #11940

Tom
Keymaster

I just updated the code here: https://wpshowposts.com/support/topic/weird-margin-on-list/#post-11659

Can you give it another shot?

Let me know 🙂
Author

Posts

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

You must be logged in to reply to this topic.

[Support request] Weird margin on list