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.
More...
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:
A cool looking column layout found on the Thrive Architect "FitBrand" Landing Page
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:
The “Icons” Pricing Table Template in Thrive Architect
And this is how the same pricing table looks when displayed mobile:
Looks good on mobile, right?
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:
This is how the layout looks on Desktop - The important part of this layout is the phone icon and the phone number, placed next to each other as columns
Aaaaand here’s how it looks when it gets displayed on mobile:
Not quite what you were hoping for, right?
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:
Make sure the “Wrap Columns” option is NOT enabled
Disabling this option will arrange the columns just like they were displayed on Desktop:
Done! Unchecking the "Wrap columns" feature makes it look just as good as it does 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:
Focus your attention on the ‘heading text & arrow’ column layout in the red highlight box. That’s 2 elements next to each other in a column (heading text on the left and arrow image on the right)
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...
What’s the arrow doing at the bottom there?!
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:
In this case, make sure to ENABLE the "Reverse Column Order" option
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:
Just like that, the layout looks good on a mobile, too
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!
Thank you so very much for all of your design oriented tutorials. I was brought up as a graphic designer in the 1980s 🙂 although I have worked in agencies for decades, the clients I have served have always been print heavy. Your products and your tutorials have enabled me to develop sites that keep pace with current standards. As much as I love Thrive products, I have been wrestling with the mobile responsiveness options. This has been a very helpful peace.
Thank you very much for sharing this with us, Christine!
I’m really glad this was helpful to someone with so much design expertise 🙂
Thanks David. I would have never figured out any of that on my own!
No problem at all, Franc! Happy to help 🙂
Great info… TY David. Thrive Rocks!
Thanks for the comment, David! Glad you enjoyed it 🙂
Hi David, I’ve always either avoided using columns or rearranged manually so that it would look fine on mobile… Because I didn’t even know about “Reverse Column Order” and “Wrap Columns” options! This is promising, thank you so much for the tutorial David!
I know exactly what you mean, Ray… I’m happy it was helpful 🙂
I have a question on this topic. I’ve made changes in mobile for example, but they have not applied only to mobile. They have also affected either the desktop view or the tablet view as well. I seem to have difficulty with making a change that applies only to mobile and/or tablet views. Older tutorials on this show options that seem to be different in the current Architect versions. How do we make certain our mobile and tablet edits affect only those views?
Hi John,
It’s important to understand the difference between inline edits and edits that are done on a “container” level.
Inline edits will always apply to all the screens.
Example: if you set the alignment on the column element to center align on mobile, it will only affect that view. If you select the text and use the text options in the floating bar to align the text you’re making an inline edit and it will apply to all screen sizes.
Now, if you’ve done inline edits before applying edits to the container, these will always override the settings. This is not something that is Thrive Architect specific, but a CSS restriction.
It makes applying the “outside in principle” so important. The outside-in principle states that “When applying the same styling to multiple elements, apply the styling to the parent container of those elements, starting from the biggest container working your way inwards to the smallest container.”
This will help you build landing pages faster AND make mobile edits easier. You can learn more about it here: https://thrivethemes.com/the-outside-in-principle/
What type of changes were you trying to make?
Hello, John.
That’s a really good question and we could probably do a separate tutorial about this topic as well.
The basic principle is that the settings are applied first on a desktop, a tablet, and lastly, on a mobile device, not the other way around, as seen in this article: https://thrivethemes.com/tkb_item/responsive-editing-technical/. However, there are a few settings that are an exception to this rule:
1. When editing a text element in mobile view, if you apply any of the options found on the canvas (Bold, Italic, alignment, etc.) they will be applied on all devices.
2. If you move an element (using drag and drop) while you are editing in mobile view, that element will also be moved on a tablet and on a desktop.
– To be able to display an element in a totally different position on mobile, the solution would be the following: Add an element, go to “Responsive” and make it visible only on the desktop. Then add the same element again, but this time, place it where you want to display it on a mobile, then, access “Responsive” again and make it visible only on a mobile.
Ah ha! So that’s how you do it. I’ll revert back to my site and start tweaking. Can you tell me which styles that are global so I don’t alter other layouts? Is it only text size, colour and alignment?
Hello, Antonia 🙂
What exactly to youu mean by global styles?
If you are reffering to the kind of changes that apply on all devices, not only on mobile, I answered a similar question that John had below, you can check that out as well 🙂
Thanks, David! I’ve been using Thrive Architect for almost 2 years and didn’t realize the design options were device specific. I had been making updates to the desktop size and then checking to see how the changes looked on the tablet and mobile. This tutorial is quite helpful. I’ve got some work to do ????.
Yes, the mobile device can be a bit unpredictable at times, but luckily you can use these quick fixes 🙂
Thanks David. This was always a struggle. So far 🙂 It’s over!
That’s great news, Peter! Thanks for your comment 🙂
Thank you! This gets me out of a pickle, you must be psychic, I was just having this problem today!
Haha I’ve heard that before! Glad I could help, Maggie 🙂
Hey David, thank you very much, it is very helpful. I have a question about this:
On my site I have an advent calendar with 24 icons “star”! When someone click on the star (with tooltip 1, 2, 3 and so one) there is open up an lightbox with an idea. It is pretty cool on desktop but on mobile the stars with the numbers are in desorder. How can I fix it? I hope you understand what I mean. Thanks and greetings from Switzerland!
Fabienne
Hello, Fabienne!
I kinda have an idea of what you are describing, but the best way to go in this situation would be to open Support ticket for this issue, maybe even send a few screenshots of how the problem occurs and we will be more than happy to help 🙂
thank you david, very helpful tutorial
I’m happy to hear that, Ramesh 🙂
I like to use static background images. Since they don’t work on mobile I can only use them on desktop elements. The problem is that Ipads pick up both elements (desktop in landscape orientation, mobile in portrait orientation) so in landscape a blank background appears. It seems like I can’t use them at all without looking sloppy on an Ipad in landscape orientation. Do you have a solution?
Thanks so much!
Hi Mark, what do you mean with “Since they don’t work on mobile”?
Hello, Mark.
Yes, it is a known issue that static background images don’t work on mobile, and that is because they would simply take too long to load, and even if they did load eventually, they would slow down you website performance on mobile significantly, because a mobile doesn’t have so many resources as a computer.
However, for the iPad situation that you are encountering, it would be best if you would open a Support ticket, simply because it is a more technical issue and we would like to take a look and see exactly how it happens on your website.
As awesome as this is, I really hope we actually get better tablet/mobile column options like Elementor/Oxygen in the future.
Also, is there anywhere to make requests for future updates btw? 🙂
I tried recreating one of the layouts that I build in this video on both Elementor and Oxygen and here’s what happened:
On Oxygen I found the options to be overwhelmingly complicated and technical, so I couldn’t go through with building the layout.
However, on Elementor I managed to recreate the layout succesfully on desktop, but on a mobile it looked exactly like it did on Thrive Architect. However, in Thrive Architect I applied the “wrap columns” option, which completely fixed how the layout looked. In Elementor I couldn’t find such an option. If there is one, they hid it pretty well.
Maybe I missed something, what column options were you referring to exactly? 🙂
I love your value bombs David!
Thanks, Sascha! 😀
Great tips, David! I have actually a question. Looking at this page on a staging website, there are 4 columns. Based on settings of screens, sizes of screens (laptops and tablets), the columns have different hights. It takes a lot of tweaking, but I am sure, it could be done much more efficient… Maybe something to shoot a vid about?
This is the page: http://www.kager-159works.internetmarketeers.nl/aantrekkelijke-werkgever/
(When the site goes live the url will be: http://www.kager-159works.nl/aantrekkelijke-werkgever/
Thanks,
Tom
Hi, Tom.
I see what you mean. In this case, it would be great if you could open a Support ticket for this issue, so that the guys can access your site and see exactly where the problem occurs in the editor while building the 4 columns.
Hi David, I already did. Thanks. Tom
I’m definitely not seeing these mobile options on the latest version of Thrive Architect.
I’m thrive architect user, I’ve notice usually on the “TEXT ELEMENTS” for aligning text on mobile. Why there is no option for specific alignment in mobile. For example on the desktop view, I want my text in left align and in the mobile view I change it into the center align. But it affect on the desktop view to. Is there have a option for specific align for mobile that not affected on the desktop? Hope you will response. Thanks!
Hi Jarwen,
When you make inline edits, it will apply to all the screens, but you can use the outside in technique (https://thrivethemes.com/the-outside-in-principle/) to make the text left on desktop and center on mobile.
This means you apply the editing to the element that’s surrounding the text element (such as a column, a content box or a background section)
You can learn more about it here: https://thrivethemes.com/mobile-friendly-content/
Brilliant – fixed my mobile issue – thanks
Happy to hear!
Thanks for the tutorial, David. I have a couple of questions for you:
1) Is there a way to ensure that a 4-column layout on the PC can be displayed as a stacked 2-column view on the tablet and mobile? I am thinking of image grids where stacking all the images in a single column would make it far too tedious to scroll.
2) The second scenario is far more complicated. If I have a 3-column layout with text in the centre and occasional images on either side, would it be possible to have all the images be aligned to only one side while having the text align on the other? I would imagine doing the 3-column layout visible on the PC and a separate clone of the same content in a 2-column layout visible only in tablet and mobile views, but if there is a better way to do this I’d love to know about this.
Hi Euchai,
1. You can use the “breakpoint” value to have a 2 column layout on tablet https://share.getcloudapp.com/E0unRg9b. And you can obtain the same effect on mobile (set the breakpoint to be small https://share.getcloudapp.com/WnuJZykO and then make sure that your images are smaller than the breakpoint eg. set the breakpoint to 150 px and make sure your images are no bigger than 150px https://share.getcloudapp.com/ApukeJxo)
2. Yes that’s tricky… You can get something similar to what you want again by wrapping the column and playing with the breakpoint: https://share.getcloudapp.com/NQur4NlJ
But the text will only be as tall as the first image because it’s basically 2 lines stacked. That’s the best way I can think of though (unless you hide on mobile and create the layout you want for mobile only)
Thank you very much! I needed this. My desktop layout from a TTB supplied landing page alternated images and text left and right in an attractive way down the homepage. But in mobile view, some of the images displayed below instead of above the associated text. As I learned here, by clicking Column Options and the Reverse Column Order button, those misplaced images now display correctly above the text in mobile view. Thanks again!