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

Home Forums Support Flint Skin Dispatch: 1 full-width image for magazine grid Header on front page?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #881880
    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?

    How to make this image full-width?

    Thanks a lot!!
    Michael

    #881998
    David
    Staff
    Customer Support

    Hi there,

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

    #882706
    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!!
    How to align the width of the image in the bottom right?

    #883062
    David
    Staff
    Customer Support

    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 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.