How to fix the height of a container?

Hello,

Everytime I’m using the Container block in a Grid, I’m struggling to make sure they all have the same height. Having a “fixed height” setting for Containers, Buttons, etc. would be so practical.

How can I have those 2 “columns” be of teh same height so that all elements are vertically aligned:

Here is how I built this layout if it helps:

Hi @Dek,

Can you provide the link to the page where we can find this Grid?

Sure. Here is is.

I can’t seem to find this specific Grid and text “La salle de bains”. Can you point specifically where it’s located?

Hello,

This is the page.

Search for the text “Baignoire” and you’ll see the image.

Thank you.

@Dek, there is a code snippet here that will set the height of the cards to fill the row, and use margin to push the buttons to the bottom of the cards:

(You will likely also want to set a fixed height or aspect-ratio on the card images, which should then make the text line up between cards too.)

1 Like

Thank you for the link.

Tom said: “As of right now, there is no option for this, but it can be done with some simple CSS.”

His message is almost 2 years ago. Can anyone confirm there is still no option to do so and the code he provides is still the best option in Nov. 2022?

I’m not sure how to set a fixed height or aspect-ratio on the card images: How and where do you do this? Do you mean in Photoshop or in GeneratePress?

Also, please be aware that I have no control on the size of the image as you can see on my first message: It is an Amazon link integrated in a Custom HTML Block that I placed into a GB container.

Yes, you still need custom CSS to align Grids vertically. As the structure is very different for each site, the CSS would vary all the time.

For your structure, you can try this CSS:

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container > img:last-of-type {
    width: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container > .gb-button-wrapper {
    margin-top: auto;
}

This pushes the Button to the bottom, but the image stays the same. If you want images to be the same in height, there would be cropping involved.

Thank you so much @fernandoazarcon2

I inserted your code snippet in my CSS but I actually cannot see the difference:

Should not the buttons be aligned now? I can’t see a difference with or without the code snippet?

It’s not working because there’s a syntax error somewhere in your Custom CSS. You can copy and paste all your custom CSS in Additional CSS here: http://csslint.net/

Through this, you’ll see the errors which need to be addressed first for other codes to work.

Thanks. Actually my CSS was empty and I just copied and pasted the code snippet you generously suggested.

Here is what says the CSS checker tool:

My English does not allow to understand what they mean by adjoining classes and where is the issue since you’re an expert and you provided that code.

/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/*How to fix the height of a container?*/
.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container > img:last-of-type {
    width: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container > .gb-button-wrapper {
    margin-top: auto;
}```

There’s still syntax errors: CSS Lint - Google Chrome 20...

I’m referring to the code in Appearance > Customize > Additional CSS.

My bad. I thought i was always better to add code snippet to the Child Theme CSS. Why does it make a difference to add it to the Additional CSS? I mean, why does it not work if added to the Child Theme CSS?

I I added it to Additional CSS and have not touched anything else. This is how it looks now:

Yes, the code just pushes down the Button. As you’ve shown, it appears to be working.

Adding it in styles.css of the Child theme should also work.

Perhaps you have a syntax error there as well? Have you checked? Or, it might just be a caching issue.

1 - Well, I copied and pasted my entire Child Theme CSS above. Can you see any mistake? I can’t.

2 - The icon not displaying is an issue related to SEO Press. I read a Wordpress support discussion where they say that:

" It seems some plugin(s) did some “optimization” on the image, adding data-src and alt attributes (among others). And the culprit here seems to be the data-src attribute, which errors out (because the URL is not a standard image), hence the broken image icon (plus the alt text from the alt tag also generated by a plugin)."

3 - But would you know why there is that extra blank space between the image and the text just above the button? How to remove it?

Are you referring to this space? How to fix the height of a ...

If so, it’s there because you wanted to align the button to the other button.

If you want a different structure, can you provide a screenshot of how you want it to look like?

Well, I just want the same structure as for all the other image on the same page (see URL provided at the beginning of this thread):

I don’t understand why the 2 bath tub images behave differently and how to make their layout structure just like the other images and blocks on the same page.

Thank you

It’s because the height of your other images placed on a Grid is similar. The one not aligning has images with different heights.

We can align the image’s height through CSS but this will crop the image.

Hello,

Still stuck with this.
Can you please confirm if I should put “gb-inside-container” or “gb-grid-wrapper” as the class for my grid? I tried both and none works.

The code snippet is in my Additional CSS:

Thank you

What are you trying to achieve? Are you want to align the image’s height through CSS?