Mixed column Containers in Carrd

This workaround makes up for the lack of nested columns in Carrd Containers, so you can mix 1-column and multi-column layouts.

Mixed column Containers in Carrd
Ever found yourself wrestling with Carrd's layout limitations? You're not alone! One we keep finding is Carrd's refusal to let you mix and match column layouts within a single Container.
After countless hours of tinkering though, we think we’ve got a solution. We've got a sneaky workaround that'll have you nesting columns like a pro.
Follow along as we unveil our secrets to show you, step by step, how to achieve the layout flexibility you've been dreaming of.
You can see our working demo at mixedcontainers.carrd.co.
 
Step 1 – add Containers
  • Add two Containers to your Page
  • Set the top one to Default, the second to Columns
  • Add your content to each
  • Set the Background color of each to be the same
 
At this point your page should look something like this:
notion image
 
Step 2 – Add rounded corners
  • Now, go to the Settings for your top Container
  • Click on the Style tab
  • Add the below code in the box
    • border-top-right-radius: 50px;
      border-top-left-radius: 50px;
      Mixed column Containers in Carrd
  • Now go to the Settings for your bottom Container
  • Click on the Style tab
  • Add the below code in the box
    • border-bottom-right-radius: 50px;
      border-bottom-left-radius: 50px;
 
At this point your page should look something like this:
notion image
 
Step 3 – Join the Containers together
  • Find to your Page element and select it
  • In its Settings, find Spacing and set it to 0
 
Now, you should see what looks like one Container, like ours below:
notion image
 
And there you have it, a bit of Carrd magic. Take a step back and admire your handiwork – you should now be looking at what appears to be one seamless Container with a mix of column layouts. Pretty nifty, right?
The next time someone tells you Carrd can't do nested columns, you can just smile knowingly. You've got the secret sauce now!
But before you pat yourself on the back and call it a day, let's talk mobile for a second. We all know how fickle those small screens can be. So, spend a few minutes tweaking those Mobile settings too.
 
We hope you liked this tutorial. Check out other Carrd tips & tricks.
We hope you liked this tutorial. Check out other Carrd tips & tricks.

We send weekly, very short emails featuring Carrd resource links

Join the Starrt mailing list

Subscribe

Written by