Hi all,
Many of you asked me to update the following code, provided by Joachim Brindeau, which creates a two colums layout. These two colums have equal width - 50%. Some of you want the left column or the right column to have a 30% or 40% width. It’s possible.
DEMO HERE: https://test-play.softr.app/two-columns-width
You will find the updated code after the recap of the original code and explanation:
- Recap
"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>
- Updated code
Here is the updated code to change the width of each columns. Follow the same process.
<div class="row">
<div class="column left-column">
<span id="tocolumn1"></span>
</div>
<div class="column right-column">
<span id="tocolumn2"></span>
</div>
</div>
<style>
.column {
float: left;
}
.left-column {
width: 40%;
}
.right-column {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
<script>
$("#block1").insertAfter($("#tocolumn1"));
$("#block2").insertAfter($("#tocolumn2"));
</script>
