[Support request] Dispatch Header customization

Home Forums Support [Support request] Dispatch Header customization

Home Forums Support Dispatch Header customization

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1625313
    Benjamin

    I’m using Dispatch , the Header got 4 items, 1 big, 1 middle and 2 small box. How can I modify it into just 2 Big boxes only?

    View post on imgur.com

    Also, is that possible to make 1 big and 3 small like these?

    View post on imgur.com

    #1626071
    David
    Staff
    Customer Support

    Hi there,

    go to Customizer > Additional CSS and replace this:

    /* 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 {
            display: grid;
        }
    }
    
    @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 / 5;
            grid-row: 1 / 4;
        }
    
        .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: 5 / 7;
            grid-row: 2 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-column: 7 / 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;
        }
    }
    
    .wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
        height: 250px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    
    .wpsp-grid article:first-child .wp-show-posts-image a img {
        height: 500px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    
    .wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
        display: none;
    }

    with:

    /* magazine Grid 2 block standard */
    /* Add wpsp-grid class to WPSP List shortcode wrapper */
    @media(min-width: 600px) {
        .wpsp-grid .wp-show-posts {
            display: grid;
        }
        .wpsp-grid .wp-show-posts {
            grid-template-columns: repeat(2, 1fr);
        }
        .wpsp-grid article .wp-show-posts-image a img {
            height: 250px;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }
    }

    Then go to WPSHOW posts and edit the List titled Header and change the Posts per Page to 2

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