[Resolved] Post box design

[iamarghya]

oh man, thanks a Lot…
The last question, see the headlines in the boxes they are in different lengths so height is not the same for all how can I set the same height for all; height and post excerpt will have the same height gap

[Fernando]

Varying word lengths would give you different heights. You could try reducing the font-size of the Headline Block, or manually make sure that the Titles are same in length.

You can also modify the padding values and the bottom values to try to make the spacing visually more appealing if the title lengths are different.

You can also try forcing it through CSS. For instance, try adding this in Appearance > Customize > Additional CSS:

h2.gb-headline.gb-headline-5bb27283.gb-headline-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    position:relative;
}

h2.gb-headline.gb-headline-5bb27283.gb-headline-text:after {
    content:"...";
    position: absolute;
    right: 0px;
    z-index:200;
    color: #fff;
    bottom:0px;
}

Hope this helps. 🙂

[iamarghya]

On their website how do they manage it? In the template?
And also in what field do I need to put the box-shadow CSS so that I can add the drop shadow to these boxes?

[David]

Hi there,

The example site uses a CSS height property to fix the height of the headings.

Quick question – is this a live site ? As you’re using GenerateBlocks 1.5 Alpha, and you should be aware that this means breaking changes to the plugin are a major possibility, and we have warned against using the current versions on live sites.

To add a box shadow, select the Container Block you want the shadow applied to and in Advanced > Additional CSS Class(es) add your custom class.

[iamarghya]

Yes, it is a live site but I am currently experimenting with it.
See the hover effect in the home page post template What I want is for all of the elements to be in fixed size ( headline, excerpt, button), just like my blog page post template has all the same sizes, the position, and the gap of the headline, metadata, excerpts are the same, can u also tell me how to do that to my homepage’s post,
The upper CSS didn’t work.

[David]

As long as you’re aware that the work you have done so far using the GB Query loop may need to be redone if we make breaking changes.

just like my blog page post template has all the same sizes, the position, and the gap of the headline, metadata, excerpts are the same,

Thats not ‘design’ thats causing that, its just on destkop screens your titles happen to be 2 lines, your excerpts happen to be 4 lines. If you reduce the width of your browser you will see in some cases the titles become 3 lines and excerpts become 5.

So what do you want? Should all Titles be limited to 2 lines, and excerpts to 4 lines and anymore gets hidden ?

[iamarghya]

oh ok ok That’s okay. That’s why I didn’t mess with the old design it is just a new container.
See in the blog page the post boxes have the same gap,
I mean in one box an excerpt is a little bit up or down on another, they are all same looking, also if I change my screen size they are forced not to change positions. I need that same looking gap in the homepage, If you hover over all three boxes you can find the position of the button is a little bit up in 1st box then they are down on another two boxes. You are understanding, right?

As u said if one box has 4 lines of excerpt and one has 3, I want to set their position fixed, Just by adding extra space in the 3 lines of the excerpts. And the same for the title.

I don’t wanna hidden them if one has 4 lines and another has 3 lines I want to give the ‘3 lines’ a 1-line of bottom space so every box looks symmetrical when hovers, Like the “grid-template-rows: auto 1fr auto” we can use to fix the position, I want to do like that but it’s not working.

[David]

Try adding this CSS:

.gb-container.my-absolute-content .gb-inside-container {
    display: grid;
    height: 100%;
    grid-template-rows: 70px 1fr auto;
}

Then edit the Excerpt headline block, adjust the margins to 10px top and bottom or whatever looks correct.

[iamarghya]

Hey perfect. I think I made it, Can u also check for me once, I think it’s all perfect now right?

[David]

Looks great to me:

[iamarghya]

Yep, Thanks a lot. Closing it btw How many days to go GP block as stable?

[David]

Well the size of that update, and the amount of options it has, i would expect we’ll be in alpha and then beta for a few weeks.

If all goes well then beginning of June, if not by the end of June we should be in stable release.

[iamarghya]

Nice

[Author]

Posts