Boxes with equal height and witdh / only with custom code?

Design help General
1

hi,

i am fairly new to webflow and doing my first steps.
one of these steps is a layout i am working on.

it can be found here: http://test150807-01un.webflow.io/

i would like to have boxes with equal height and width (the first box has double width). the complete system should flow completely fluid and works so far (i did not do some adjustments to lower breakpoints, they will follow but they are not the problem up to now).

my problem is:
i managed to build this by using custom code but custom code can not be displayed in webflow therefore i cannot edit the page. is there some solution for building this completely in webflow?

my custom code is:

<style>
    /* Set the media query's min-width to whatever you want */
    @media screen and (min-width: 1200px) {
        /* Set the container's max-width to whatever you want */
        .w-container {
            width: 100%;
            max-width: 1200px;
        }
    }
    
    .box {
    	position: relative;
	    width: 31%;		/* desired width */
    }
    
    .box:before {
    	content: "";
    	display: block;
    	padding-top: 100%; 	/* initial ratio of 1:1*/
    }

    .boxcontent {
    	position:  absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    
    .doppelt:before {
        padding-top: 48%;
    }

</style>

i appreciated any help with this.

best,
ulli.

2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.