Archived topic
Flint Skin Dispatch: 1 full-width image for magazine grid Header on front page?
3 replies · Started by XHAUER Media GmbH on April 27, 2019
Hey team,
how and where in WP Show Posts can I change the magazine grid header on the front page for Flint Skin Dispatch in order to use ONE full-width image only, instead of 4 images?
If I change the Posts per Page in the WP Show Posts List Header to 1, then the image won't be shown full-width (see screenshot below). How and where can I make it full-width?
Thanks a lot!!
Michael
Hi there,
in Dashboard > Appearance > Elements edit the Magazine Grid Header. In Element Classes you will see two classes just delete: wpsp-grid
Cool, thanks a lot David!
And now, next question: If I just set it from 4 to 3 images in the Header, how can I make sure that the image in the bottom right will be displayed in the same width as the one above (see screenshot below)?
Thanks!!
The grid was designed specifically for 4 posts to be displayed. And the particular grid method isn't automatic you would need to edit these two CSS rules in Customizer > Additional CSS:
@media (min-width: 900px) {
.wpsp-grid .wp-show-posts article:nth-child(3) {
grid-column: 5 / 7;
grid-row: 2 / 4;
}
}change grid-column: 5 / 7; to grid-column: 5 / 12;
@media (max-width: 899px) and (min-width: 600px) {
.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;
}
}change grid-column: span 2; to grid-column: span 4;
I would make sure to create a backup of the CSS, as i said it was designed for 4 images and was never tested for less :)
