Home › Forums › Pro Support › Top Articles
- This topic has 5 replies, 2 voices, and was last updated 1 year, 11 months ago by
elvin.
-
AuthorPosts
-
September 17, 2021 at 6:00 am #33915
Hermann
ParticipantHello, we would like to migrate out of our current theme and begin using generate press. The one obstacle we are running into, which I believe can be solved with your superior support would be to point us in the right direction on how we can get the top section of this website http://www.nspirement.com. The section has 5 images, two on the left side, one in the middle and two on the right side. How would we be able to accomplish this? I tried playing around with the settings but did not come close. We would also like to know how to add a featured image with the excerpt to the right like we have in the latest section. Thank you so much in advance and look forward to your reply.
September 18, 2021 at 8:04 pm #33952elvin
ModeratorHi there,
At first glance, this one resembles GP’s Dispatch – https://gpsites.co/dispatch/
Except the magazine grid is 2-1-2 with 25% – 50% – 25% width ratio.
I believe we can achieve something like this with 2 or 3 lists.
with 2 WPSP list setup, we’ll need to place the 2 WPSPs in 25%/75% column block.
And then first list would be:
– placed on the 25% column.
– A list with card style set to “Overlay” with post per page count set to 2.
– Column set to 1 so the posts are stacking.As for the second list:
– placed on the 75% column.
– card style set to “Overlay” with post per page count set to 3.
– Set the offset to “2” so it doesn’t repeat the post from the first post list.
– column set to one. (this is fine, we’ll set the layout through CSS)The 2nd list is the tricky part because of the CSS. But we can basically just copy the CSS of Dispatch’s magazine grid for this with a few modifications so posts #4 and #5 are displayed in a stacking manner.
September 20, 2021 at 6:55 am #34014Hermann
ParticipantWould you happen to have the CSS for dispatch magazine grid?
September 20, 2021 at 4:57 pm #34035elvin
ModeratorThis is the part of the CSS dispatch uses for its magazine grid. You can play around with its values.
/* 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; }
October 18, 2021 at 7:49 am #34735Hermann
ParticipantSorry for the delay response. I think I have it, but how can I make the middle image a little smaller. The website I am testing on is http://www.delazing.com
October 18, 2021 at 10:03 pm #34755elvin
ModeratorNot exactly sure what image you’re pertaining to.
Is it this one? https://share.getcloudapp.com/YEuP8KDO
Are you trying to lay it out like this? https://share.getcloudapp.com/xQuj9ZNN
If yes, Replace these CSS:
.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;
}with these CSS:
.wpsp-grid .wp-show-posts article:nth-child(3) { grid-column: 6 / 5; grid-row: 2 / 4; } .wpsp-grid .wp-show-posts article:nth-child(4) { grid-column: 6 / end; grid-row: 2 / 4; }
-
AuthorPosts
- You must be logged in to reply to this topic.