[Support request] Magazine Grid

Home Forums Support [Support request] Magazine Grid

Home Forums Support Magazine Grid

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1610783
    JOAQUIM GALANTE

    Can you help me to divide the big square into 4 small ones on Magazine Grid to be 8 squares in all.

    https://focusmsn.pt

    Thanks a lot

    #1611238
    David
    Staff
    Customer Support

    Hi there,

    first you would need to edit the WP Show Posts list that is being displayed in the hero grid header element, and set this to display: 9 posts.

    Then look for this CSS:

    @media (min-width: 900px) {
        .wpsp-grid .wp-show-posts {
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: fr auto;
            grid-row-gap: 1px;
            grid-column-gap: 3px;
        }
    
        .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 / 7;
            grid-row: 1 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3) {
            grid-column: 7 / end;
            grid-row: 1 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-column: 5 / 7;
            grid-row: 2 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(5) {
            grid-column: 7 / end;
            grid-row: 2 / 4;
        }
    }

    If you remove or comment out this part of the CSS, then the grid will form a 4 x 2 grid:

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / 7;
        grid-row: 1 / 4;
    }
    
    .wpsp-grid .wp-show-posts article:nth-child(3) {
        grid-column: 7 / end;
        grid-row: 1 / 4;
    }
    
    .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }
    
    .wpsp-grid .wp-show-posts article:nth-child(5) {
        grid-column: 7 / end;
        grid-row: 2 / 4;
    }
    #1611490
    JOAQUIM GALANTE

    I don’t want the 4 squares divided in 8, i want the big square divided in 4.

    #1611516
    David
    Staff
    Customer Support

    You will need to replace this CSS:

    /* WPSP Grids */
    /* Single column align side image */
    /* Add wpsp-align class to to WPSP List shortcode wrapper */
    @media (min-width: 420px) {
        .wpsp-align .wp-show-posts-inner {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    
        .wpsp-align .wp-show-posts-inner>div {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
    }
    
    @media (max-width: 768px) and (min-width: 420px) {
        .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
            margin-right: 1.5em;
        }
    }
    
    /* 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 this CSS:

    /* WPSP Grids */
    /* Single column align side image */
    /* Add wpsp-align class to to WPSP List shortcode wrapper */
    @media (min-width: 420px) {
        .wpsp-align .wp-show-posts-inner {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    
        .wpsp-align .wp-show-posts-inner>div {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
    }
    @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 {
            grid-column: span 2;
        }
    }
    @media (max-width: 768px) and (min-width: 420px) {
        .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
            margin-right: 1.5em;
        }
    }
    
    /* 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 (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 .wp-show-posts-image a img {
        height: 250px;
        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;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.