WP Show Posts

Hi there,

It's certainly possible with a bit of custom CSS:

Example: 2 columns on mobile

@media (max-width: 768px) {
	.wp-show-posts-columns .wp-show-posts-single {
		width: 50%;
	}
	.wp-show-posts-columns {
		margin-left: -2em !important;
	}
	.wp-show-posts-columns .wp-show-posts-inner {
		padding-left: 2em;
	}
}

You can change the width value to 100% for 1 column or 33.33% for 3 columns. :)

It's almost good but there is a small defect with the vertical gap

It’s almost good but there is a small defect with the vertical gap

Can you try adding this within the @media rule?

.wp-show-posts-inner {
    margin-left: 2em !important;
}

Let me know how it goes.

Almost the expected result
Reduce the browser size to see the problem.
First, the fourth post is cut ...
Then the four articles without gap.
Then correctly.

Oups. I have the same problem with hero

Did you mean this occurence? https://share.getcloudapp.com/o0ueNGqE

IF so, this is because the 4 column layout may be too wide for tablet view.

Personally, I suggest changing the max-width of the media rule to 1024px so the 2 column layout applies to small desktops and tablets as well.

It's basically changing @media (max-width: 768px) to @media (max-width: 1024px).

Yes it is from this occurrence.
By setting 1024px, the problem is shifted.
I just saw why.
From 1024px the width of the posts is fixed and not fluid like in the smaller breakpoints.
How can I fix this? by putting the shortcode in a container?

How can I fix this? by putting the shortcode in a container?

I don't think that would fix it because the contents will still be cramped because the CSS still tries to force 4 columns in a row on a smaller viewport.

If I may suggest, I'll change the column numbers for tablet as well.

Example 4 for desktop, 3 for tablets, 2 for mobile.

@media (max-width: 768px) {
	.wp-show-posts-columns .wp-show-posts-single {
		width: 50%;
	}
	.wp-show-posts-columns {
		margin-left: -2em !important;
	}
	.wp-show-posts-columns .wp-show-posts-inner {
		padding-left: 2em;
	}
.wp-show-posts-inner {
    margin-left: 2em !important;
}
}

@media (max-width: 1024px) {
	.wp-show-posts-columns .wp-show-posts-single {
		width: 33.33%;
	}
	.wp-show-posts-columns {
		margin-left: -2em !important;
	}
	.wp-show-posts-columns .wp-show-posts-inner {
		padding-left: 2em;
	}
.wp-show-posts-inner {
    margin-left: 2em !important;
}
}

It's no good
Articles à la une

I'm not exactly sure WPSP is the issue here.

Are you trying to fix the horizontal scroll that occurs here? - https://share.getcloudapp.com/wbu61b9y

If yes, I don't think this is coming from WPSP.

Note: For WPSP questions, please ask them on their appropriate support forum here - https://wpshowposts.com/support/area/pro-support/