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:

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:

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:

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.