Masonry style layout with columns of text?

Ah nice, thanks. And then just adjust max-width to the width of the site.

What about the other thing I’m trying to achieve: having both columns be the same height?

Thanks.

Hi Rikard,
Currently I only have the design in an XD file, I haven’t started building it yet. (I tested a few things on an unpublished page on our site). So the only thing I really have to show you is the image above ^^

Yes, no worries. It’ll be a week or two, but I’ll let you know. Thanks.

HI.

I managed to create this using CSS on 1/2 columns. The design changed slightly, but the issue was the same. I’ve attach a screenshot for you to see.

I put the 3 rows into 3 colour sections, (the top one with an image background) then I added a custom class to each column in each colour section (so each of the 4 tiles you see in the screenshot has it’s own class), gave them all fixed heights in px according to the gap they needed to fit in, gave them all ‘position:fixed;’ then altered the top or bottom margins to negative values to move the columns up and down into place.

Like so:

/* tile position top*/
.tileposition {
    position:fixed;
    height: 450px;
    bottom: -200px !important;
}

/* tile position middle*/
.tilepositionmiddle {
    position:fixed;
    height: 450px;
}

/* tile position last tile*/
.tilepositionlast {
    position:fixed;
    height: 450px;
    top: -675px !important;
}

/* tile position with form in*/
.tilepositionform {
    position:fixed;
    height: 950px;
}

To get the gap right between the top colour section and the tiles underneath there’s a whitespace divider, which made the button in the top tile inaccessible, as the divider sat over the tile with the button in. So I added this to the top colour section to bring it to the front:

.bringtofront {
    position: relative;
    z-index: 10000 !important;
}

And that got me the look I was after. I thought I’d share the CSS I used in case someone else needs to do something similar. However, if there’s a more elegant/easier way of doing this do let me know. Otherwise I think we can close this thread.

Thanks.

• This reply was modified 3 years ago by Thedogscreative.

I swapped out the whole layout on mobile, it was the easiest thing to do.

I’m happy for this thread to be closed if you are. Thanks for you help.