Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Support request] Weird margin on list

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Weird margin on list

  • This topic has 7 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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

    #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 🙂

    #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?

    #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 🙂

    #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.

    #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 🙂

    #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

    #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 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.