shortcode + wp show post problem

Hi Francesco,

You have a custom code overriding the margins beings set through the WPSP List settings: https://share.getcloudapp.com/5zunEL9N

You can modify/delete this code to achieve what you’re going for.

Hope this helps! :)

/* Related News after posts */
@media all and (min-width:768px) {
	#wpsp-1152.wp-show-posts-columns .wp-show-posts-inner {
		margin-bottom: 1 !important;
	}
}

I corrected by doing so, can it be okay in your opinion?

This property:

margin-bottom: 1 !important;

needs a unit eg. px so should be this:

margin-bottom: 1px !important;

thnx david, work

I dare ask for another CSS. is it possible to round the edges?

Try changing the CSS to:

@media all and (min-width:768px) {
	#wpsp-1152.wp-show-posts-columns .wp-show-posts-inner {
		margin-bottom: 1px !important;
                border-radius: 10px;
                overflow: hidden;
	}
}

What could be the reason for the change of only the top edges?

Do you want rounded corners on the image ?

hi david, yes thnx.

Hi Francesco,

If you want to implement rounded corners to your images, you can modify the previous code to this one:

@media all and (min-width:768px) {
	#wpsp-1152.wp-show-posts-columns .wp-show-posts-inner {
		margin-bottom: 1px !important;
        overflow: hidden;
	}

    .wp-show-posts-image a img {
    border-radius: 20px;
    }
}

If you wish to apply the rounded corners to mobile view as well, use this instead:

@media all and (min-width:768px) {
	#wpsp-1152.wp-show-posts-columns .wp-show-posts-inner {
		margin-bottom: 1px !important;
        overflow: hidden;
	}
}

.wp-show-posts-image a img {
    border-radius: 20px;
}

Kindly let us know how it goes. :)

works perfectly. may i ask if there is a way to change the setting in the mobile version?

Example

If you wish to put them side by side, here is a CSS code you can try:

@media (max-width:768px) {
    article.wp-show-posts-single.post.type-post .wp-show-posts-inner {
      display:flex;
      flex-direction:row;
    }
    
    article.wp-show-posts-single.post.type-post .wp-show-posts-inner>*:last-child {
      flex:1 0 60%;
      padding-left:10px;
       
    }
    article.wp-show-posts-single.post.type-post .wp-show-posts-inner {
      display:flex;
      align-items:center
    }
}

Hope this helps! :)

Sorry fernando, is it possible to move the title text up? as in the second image.

In Fernandos CSS you will see:

align-items: center;

You can change that to:

align-items: flex-start;

Work, thnx.

Glad to hear that