Hi,
trying out your Pro Grid feature for the first time. I am trying to achieve that two cells with background-image (cover) always stay in 1:1 ratio and of course responsive. Trying this for hours now but can’t figure out how to?
Should look just like in the picture:
Any help is much appreciated! Thanks!
Website is this here, but what I am trying is not live yet.
Hey Alex,
The key to achieving a 1:1 cell or even a column is identifying the parts of the cell content. Based on your screenshot, you have 3 parts and the height of the 3 parts should be 100% to form a square (see the labels below).
To apply that in the builder, the Button element’s top margin (Top Space) must be 70% (can be adjusted) minus the button’s height. That can be done using the calc() CSS function which is allowed to be used in the number options such as the margin.
calc(70% - 40px)
It’s minus 40px because the button’s height is manually set in order for the button to remain the same size across screen sizes.
The button margin is then set to 30% (adjust based on the height of other parts). You can see all that working in the video below. Just set the play speed to slow as I did create that quickly to save time.
Hope that helps.
Thank you very much for this excellent answer! We will try that out!
You’re welcome, Alex. We’re happy to hear that you liked the solution.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.