You already know it’s important to make your content look good on both desktop and mobile these days.
According to Statista.com, in 2018, more than 50% of Internet traffic comes from mobile devices. That percentage is only growing, too...
Which means it’s more important than ever for all your posts and pages to look great on whatever device they get displayed on.
One particular feature that's often tricky to get just right when it comes to mobile responsiveness is the "Columns" element in Thrive Architect.
That’s why in this article, we’ll show you how to make the “Columns” element behave exactly how you want it to across both desktop and mobile devices.
As always, make sure to watch my video at the top of this post to get the full step-by-step breakdown on how to make your columns mobile responsive — in real time.
The Columns Element
As a brief introduction, the “Columns” element gives you the power to place any element in Thrive Architect next to another element so you can build some really cool layouts, like this one:
Now let’s take a look at a few common examples to see how columns behave on both desktop and mobile and what you should keep in mind when creating them for each.
Example 1: The Desired Outcome
Our first example is a pricing table, which uses columns as its core feature.
This is usually how a pricing table looks on desktop with 3 columns placed side-by-side:
And this is how the same pricing table looks when displayed mobile:
As you can see, the columns stack on top of each other in mobile view. It would be impossible for the pricing table to look exactly like it does on desktop because of the narrow screen size constraints.
Example 2: The (Un)desired Outcome
Let's now take a look at an example in which the columns don’t automatically end up displaying themselves like we want them to on mobile.
This is what the example layout looks like on a desktop:
Aaaaand here’s how it looks when it gets displayed on mobile:
What happened here is actually the same stacking behabior as occurred in the first pricing table example, but for this particular layout, the default behavior isn't appropriate.
However, with Thrive Architect, you can easily fix this when it occurs by doing the following: 1) Select the “Columns” element while still in Mobile view, and 2) DISABLE the “Wrap Columns” option:
Disabling this option will arrange the columns just like they were displayed on Desktop:
Example 3: Another Undesired Outcome
Let’s move on to our last example, which will also be an instance where things don’t go exactly as planned on mobile.
Here’s how this particular column layout example looks on a desktop device:
This is a pretty common layout used in web design, but how do you get it to look right for a mobile display?
Well, definitely not like this...
As you can see, the default stacking behaviour on mobile of these 2 column elements doesn’t make sense because the arrow isn’t pointing from the text to the TV anymore.
But the fix for this is simple. Similar to the previous example, just select the “Columns” element while still in the mobile view and tick on the “Reverse Column Order” checkbox:
This will move the arrow on top of the heading text. Now, as a final tweak, add some margin to the left side of the arrow or center it's alignment to move it into this kind of position:
Always Check Your Posts and Pages on Mobile Before Publishing
As you can see from these 3 examples, mobile responsiveness is very important. Make it a priority to always ensure that your columns look good for small devices too. If you are planning to get started with optimizing your page for mobile, make sure to check out this post about mobile landing page best practices.
As you publish more and more content, you’re bound to run into design situations where your columns don't display on mobile like you were expecting them to. That's why looking for the example scenarios and their quick fixes presented in this post will help you avoid such mobile mishaps.
Do you have any other mobile responsiveness questions or issues that you're currently running into? Let us know in the comments below and we’ll whip up some more content like this to help you sort it out!