[Resolved] Flint Skin Dispatch: 1 full-width image for magazine grid Header on front page?

[Michael]

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

[David]

Hi there,

in Dashboard > Appearance > Elements edit the Magazine Grid Header. In Element Classes you will see two classes just delete: wpsp-grid

[Michael]

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!!

[David]

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 🙂

[Author]

Posts