-
Justin35
Old problem that came back my archive cards are not aligned (read more) and (grey box) should be aligned this was the old code that solved it before not sure why it broke again.
.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container {
display:flex;
flex-direction: column;
height: 100%;
}.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > .dynamic-entry-excerpt {
flex-grow:2;
display:flex;
flex-direction: column;
}.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > .dynamic-entry-excerpt > :is(.read-more-container, .read-more-button-container) {
margin-top: auto;
}
.post.dynamic-content-template img {
max-height: 210px;
object-fit: cover;
} -
Fernando
Hi Justin,
You no longer need custom code to align grid columns.
Try recreating the Content Template or updating the Container Blocks used to the current system.
This article is not for a Content Template but it shows how such a layout can be achieved through the settings.
Make sure to place your Headline Blocks and excerpt in one Container so you can size the appropriately.
-
Justin35
Do I remove the old custom css code I sent and btw I never received the article?
-
Fernando
Yes, you should be able to remove that.
Here’s the article: https://docs.generateblocks.com/article/equal-height-grid-containers/
Try rebuilding the Content Template. We’ll try to assist you if you find difficulty in building the layout.
These two articles should be insightful as well for layout creation: https://docs.generateblocks.com/article/sizing-options-overview/#height
https://docs.generateblocks.com/article/layout-options-overview/#flex-1
-
Justin35
Yea I need some guidance with this one. So I switched over to the new Container Blocks and I have it built in elements I have a screenshot of how I currently have it.
https://ibb.co/868rN2t -
Fernando
Put the Dynamic Image Block out of the Container Block it’s in right now. Just put it after the Buttons Block.
Then, select this Container Block labeled #1 here and give it a display of flex, and set the direction to column: https://share.getcloudapp.com/JrupeOnJ
Give #2 a flex-grow of 1, and a flex-shrink of 0.
Let’s see how it goes.
-
Justin35
I made the changes to block labeled 1 but when I click on 2 I had to enable the new Container Blocks and that created another container which one do I choose to make #2 change to?
https://ibb.co/FWnCQ0P -
Justin35
When I tried on each separately it didn’t fix it
-
Fernando
I see. Can you provide admin login credentials? We’ll take a closer look at your setup.
Share it through the Private information field.
-
Justin35
ok done
-
Justin35
Sorry I resent privete information since I’m doing this in staging
-
Fernando
Here’s a screenshot that should help: https://share.getcloudapp.com/RBurJZLy
-
Justin35
Almost good but read more label and pictures are still unaligned
https://ibb.co/vY4GFbX -
Your images have different aspect ratios, I would recommend using GB’s image block and enabling its dynamic feature as the GP dynamic image block has limited settings.
Then you can set the image block width to
100%
, height to eg.250px
andobject-fit
to cover.Once the image is done, we can take another look at the rest of the layout 🙂
-
Justin35
Ok that fixed the images just the read more label is left
-
Good job!
I would also recommend deactivating the
Use theme more link
option for the excerpt and using a button block as the read more button to separate it from the excerpt.
- You must be logged in to reply to this topic.