Archived topic
Dispatch Header customization
1 reply · Started by Benjamin on January 19, 2021
Viewing posts 1–2 of 2
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?
https://imgur.com/QuKksfq
Also, is that possible to make 1 big and 3 small like these?
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
This archived topic is closed to new replies.