Archived topic
display problem with the WP Show Post plugin
5 replies · Started by Jérôme on June 23, 2021
Hello,
I bought GP Premium Lifetime.I installed a blog from the site library.
I have a display problem with the WP Show Post plugin on the home page under the main menu. Articles do not span the full width of the content.
The error comes from the wpsp-grid class because when I delete it, the articles take up the entire width, but on the other hand, I lose some display functions.
This display bug does not exist on old web browsers. For example, on Chrome Version 49.0.2623.112, the display is correct.
Do you have a valid css code for new web browsers for me? (to integrate in the additional css of Wordpress?)
Thank you in advance
Hi there,
looks like you are using the Dispatch site - but the grid has been altered.
How do you want the 4 posts to be displayed ? Should they be a 2 x 2 grid ?
Yes, 2x2 grid
screenshot
Go to Customizer > Additional CSS - and remove this CSS:
@media (min-width: 900px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr auto;
}
.wpsp-grid .wp-show-posts article:first-child {
grid-column: 1 / 10;
grid-row: 1 / 2;
}
.wpsp-grid .wp-show-posts article:nth-child(2) {
grid-column: 5 / end;
grid-row: 1 / 2;
}
.wpsp-grid .wp-show-posts article:nth-child(3) {
grid-column: 1 / 9;
grid-row: 2 / 4;
}
.wpsp-grid .wp-show-posts article:nth-child(4) {
grid-column: 5 / end;
grid-row: 2 / 4;
}
}
@media (max-width: 899px) and (min-width: 600px) {
.wpsp-grid .wp-show-posts article {
grid-column: span 4;
}
.wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
grid-row: 3;
grid-column: span 2;
}
}And add this in its place:
@media (min-width: 600px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto;
}
.wpsp-grid .wp-show-posts .wp-show-posts-single.post {
width: 100%;
}
}Thank you for your reply.
With your code, each post occupies 100% of the content. I modified the code as am to have 2 columns:
@media (min-width: 600px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto;
}
.wpsp-grid .wp-show-posts .wp-show-posts-single.post {
width: 50%;
}
}On the other hand, I have a bug when I change the number of columns to 3 or 4 columns in the interface of the WP Show Posts plugin, it has no impact on the layout and there are always 2 columns. If I choose 1 column, the site displays 1 column. As a result, I can no longer modify the layout of the plugin in the administration of the plugin
If you want to control the columns from within the WPSP list editor then just remove all of the CSS ie.
/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto;
}
.wpsp-grid .wp-show-posts .wp-show-posts-single.post {
width: 50%;
}
}It shouldn't be required as it will use the WPSP default CSS.
