How to make Pro Grid cells 1:1 ratio

[TrendRaider]

Hi people,

some time ago you taught me here how to make three cells of Pro Grid with background image and button. I now tried to rebuild this scenario with 3 cells with background colour and image and text. But can’t really get it to work, please see here. After some hours of try and error it looks ok on Desktop but on mobile it looks terrible. the image is coming out of the box etc.
I tried to give the image top-margin calc minus pixel from image to end of text and the text bottom-margin in % so that it will bei 100% afterwards, just like I thought this should work like.

Isn’t there a easy way to make cells a desired ratio like 1:1, 16:9, etc.?

[liquidedge]

You’ll probably want some JQuery to achieve that- something like this:

var resizeTimer;

$(window).on("resize", function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        $("#home-grid > .x-cell").each(function () {
            $cell_width = $(this).width();
            $(this).css("min-height",$cell_width);
        });
    }, 250);
}).resize();

[christopher]

Hi Alex,

I suggest that you try our new Grid element which you can use to force the 1-1 aspect ration. For more information:

Grid | Themeco Docs

For more visual tutorials you can check here:

Thank you.

[TrendRaider]

Hi @christopher,

thanks I already use your Pro Grid element. I also read the doc but can’t find a point related to ratios. Can you point me to the right paragraph in the doc, please?

[ruenel]

Hello Alex,

With the Grid Element, you have the option to set the number of rows and cells. Regretfully, there isn’t an option for you to set the ratio from 1:1 or 16:9 ratio. This is because the height of the cells depends on the height of the elements inside it. You can only set the minimum width and height for each cell.

Using a custom JS code is your only option to change the height of each cell dynamically. Please be advised that custom coding is beyond the scope of our support already.

Thank you for your understanding.