[Support request] Always show square images in grid

[Hans-Gerd]

Hello,
I am using GeneratePress Premium and GenerateBlocks (all up to date). The images should always be displayed square no matter at which device.
In (1) I used a grid with two containers. In (2) there are four containers.

Unfortunately, I have not found a way that the images with the content they contain (texts, buttons, etc.) are always shown square in any case with best possible utilization of the viewport (please see here: https://test3.haurand.com/beispiel-slider/).

I would be glad if you can give me a tip.

Cheers,
Hans-Gerd

[Fernando]

Hi Hans-Gerd,

To clarify, are you referring to removing the curves on the Containers?

If so, there’s a Border Radius set on the Container Block. You can remove this. Reference: https://docs.generateblocks.com/article/container-overview/#border-radius

If you’re referring to something else, let us know.

[Hans-Gerd]

Hi Fernando,
thank you for the quick reply.

Sorry, maybe I expressed myself wrong: The rounded corners should remain in any case, i.e. the entire container with the image should always be square.

Cheers,
Hans-Gerd

[Fernando]

I see. Remove the empty Container Block for the spacer.

Remove the min-height you have set for the parent Container as well.

Then, add this CSS through Appearance > Customize > Additional CSS:

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog{
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
}

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

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog > .gb-inside-container > :last-child{
    margin-top: auto;
}

This will force it to be square all the time.

You can also opt to wait for the upcoming update for GB which could come out hopefully by the end of the month. This new version has more settings. Theoretically, less CSS should be needed. Probably just this line: aspect-ratio: 1 / 1;

[Hans-Gerd]

Hi Fernando,
thanks again for the quick reply.
I still have to look at it in calm, implement it and then I will report again.

Cheers,
Hans-Gerd

[Hans-Gerd]

Hi Fernando,
that works wonderfully now. Thanks again for the great help. 🙏

Cheers,
Hans-Gerd

[Fernando]

You’re welcome, Hans-Gerd!

[Hans-Gerd]

Hi Fernando,
sorry, but I have another question, because unfortunately this does not work in the following case. You can see in the screenshot that depending on the viewport, the highlighted area is shown above the square (308.63px in the example ), so that overall there is no square view. I suspect that this is due to the container (“Eisenversorgung …” with the button below it) inside the element, which has a white transparent background.
The height of the upper area also varies depending on the width of the viewport (in the example it is 1046px).

(please see here: https://test3.haurand.com/beispiel-slider/)
Do you have a solution for this as well?

Cheers,
Hans-Gerd

[Fernando]

Can you reshare the link to that page? The page shared doesn’t exist.

[Hans-Gerd]

sorry, this is the correct link: https://test3.haurand.com/beitrag-slider-sicherung/

[Fernando]

Give the kachel_blog Container Block a different class:

Example, if the class is kachel_blog2, the code for that would be:

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog2 {
    aspect-ratio: 1 / 1;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

[Hans-Gerd]

Hi,
thanks a lot for answer, but unfortunately ist doesn’t work, see here:

Cheers,
Hans-Gerd

[Fernando]

I see. The column width is restricting the width.

Can you remove the previous code you added here?: https://generatepress.com/forums/topic/always-show-square-images-in-grid/#post-2533716

Give that Grid Block a new different class as well. Let’s try to re-do it.

[Hans-Gerd]

Hi,
thanks – I have assigned the CSS class raster_ansicht_2 to the grid. The right container has an additional CSS class kachel_log (I have changed this temporarely for now).

Cheers,
Hans-Gerd

[Fernando]

Try this:

@media (min-width: 769px) {
    .gb-grid-wrapper.raster_ansicht_2 > .gb-grid-column {
        width: unset;
    }

    .gb-grid-wrapper.raster_ansicht_2 {
        flex-wrap: nowrap;
    }

    .gb-grid-wrapper.raster_ansicht_2 > .gb-grid-column:last-child {
        flex: 1 0 33%;
    }
}

.gb-grid-wrapper.raster_ansicht_2 > .gb-grid-column:last-child > .gb-container {
    aspect-ratio: 1/1;
    height: auto;
}

[Author]

Posts