![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: align, CSS, grid row, masonry, Text block
-
AuthorPosts
-
October 19, 2021 at 2:34 pm #1325579
Hi All,
I’m trying to achieve something like the screenshot here for a client.
As you can see, the text blocks are arranged in two columns over two rows, but the blocks don’t line up vertically: the second row of text blocks starts a set number of pixels down from the the first row, and the height of the blocks are determined by the length of the content in them.
So it looks like the layout you can get using the Masonry elements, but with text blocks instead of blog or gallery content.
Preferably, Id like it if the blocks aligned along the bottom also, so that the 4 blocks fit evenly into the space, as pictured – I imagine this would mean the height would have to be adjustable somehow, so one column gets slightly taller to fill any gap, if that makes sense?
If I simply have two rows of two columns, the second row lines up with itself, but leaves a gap above the second column, and I can’t add a negative top margin to the second column because the margins apply to the whole row.
The closest I can get is using the Grid Rows elements, which gets me closer, but is full width (not the width of the container) and I cant see how I’d get the height of the columns to adjust so they all ended on the same line.
So what’s the best way to achieve this?
Can I just say also, that I’m really impressed with the Enfold support – there’s nearly always someone who can work out a solution!
Thanks for your time.
October 20, 2021 at 3:17 am #1325639Hey Thedogscreative,
Thank you for the inquiry.
The closest I can get is using the Grid Rows elements, which gets me closer, but is full width (not the width of the container)
You can actually adjust the width of the grid row element and align it to the center with css.
#av-layout-grid-1 { max-width: 1030px; margin: 0 auto; }
If you need a more specific css selector, you have to apply a unique ID or class name to the grid row element. Look for the Custom ID or class name field in the element’s Advanced > Developer Settings section.
// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
IsmaelOctober 20, 2021 at 11:14 am #1325699Ah 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.
October 21, 2021 at 6:04 am #1325789Hi,
Thanks for the update. Could you post a link to where we can see the elements in question please?
Best regards,
RikardNovember 1, 2021 at 11:51 am #1327282Hi 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 ^^November 2, 2021 at 11:31 am #1327407Hi,
Thanks for the update. We would need to inspect the actual elements in order to give you accurate CSS. Could you let us know when you have something to show us please?
Best regards,
RikardNovember 5, 2021 at 4:03 pm #1327958Yes, no worries. It’ll be a week or two, but I’ll let you know. Thanks.
November 6, 2021 at 6:30 am #1327993Hi,
No problem, just post here when you have something to show us.
Best regards,
RikardNovember 17, 2021 at 12:32 pm #1329335HI.
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 2 years, 9 months ago by
Thedogscreative.
November 18, 2021 at 4:53 am #1329416Hi,
Thank you for the update.
Glad to know that you managed to find a working solution. Appreciate you for sharing it. You may need to adjust the height of the columns on smaller screens or on different devices using css media queries to make sure that they respond or resize correctly. Other than that, the layout looks good.
Best regards,
IsmaelNovember 18, 2021 at 6:55 pm #1329560I 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.
November 19, 2021 at 5:40 am #1329602Hi,
Great, I’m glad that you managed to solve your problems, and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.
Best regards,
Rikard -
This reply was modified 2 years, 9 months ago by
-
AuthorPosts
- The topic ‘Masonry style layout with columns of text?’ is closed to new replies.