2 column layout?

Feature Requests
1

Can anyone tell me when / if this feature will be available? Or can someone point to a tutorial that mentions how to do it? Not so codey but I can handle a bit!

1 Like
2

First, you need to have a custom block where you want the columns to be. In the custom block, you need to add the following code:

<div class="row">
<div class="column">
<span id="tocolumn1"></span>
</div>
<div class="column">
<span id="tocolumn2"></span>
</div>
</div>

In the page settings, add this to the header:

<style>
.column {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
</style>

And this to the footer:

<script>
$("#block1").insertAfter($("#tocolumn1"));
$("#block2").insertAfter($("#tocolumn2"));
</script>

Finally, you need to give each of the blocks you want to put in columns an ID matching the last bit of script hereinabove. In our case, that would be “block1” and “block2”

For the record, this custom code and its explanation was given by Joachim Brindeau

3

thanks so much for that code @matthieu_chateau.
is there a way to customize the width of the 2 columns?
thx in advance
Julian

4

There would be a way, yes, but I didn’t do it for now.
I don’t have much time so I don’t guarantee I will have a solution to propose.
Though I may try tomorrow!

Thanks

5

Here it is:

1 Like