Mobile Responsiveness in Thrive Architect: Tips & Tricks

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.

​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!

Author: David Gavrilut

David is a content marketer at Thrive Themes, previously in charge of the Thrive Knowledge Base articles and video tutorials. When not at his working desk, he enjoys driving like an enthusiast, visiting the beautiful cities of Transylvania for the 100th time. Either that, or he could end up watching an entire season of Friends in one day.

  • Christine R says:

    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.

    • David Gavrilut says:

      Thank you very much for sharing this with us, Christine!

      I’m really glad this was helpful to someone with so much design expertise :)

  • Franc Karpo says:

    Thanks David. I would have never figured out any of that on my own!

    • David Gavrilut says:

      No problem at all, Franc! Happy to help :)

  • David J says:

    Great info… TY David. Thrive Rocks!

    • David Gavrilut says:

      Thanks for the comment, David! Glad you enjoyed it :)

  • Ray says:

    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!

    • David Gavrilut says:

      I know exactly what you mean, Ray… I’m happy it was helpful :)

  • John S says:

    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?

    • Hanne says:

      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?

    • David Gavrilut says:

      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.

  • Antonia G says:

    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?

    • David Gavrilut says:

      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 :)

  • Yolanda M says:

    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 ????.

    • David Gavrilut says:

      Yes, the mobile device can be a bit unpredictable at times, but luckily you can use these quick fixes :)

  • Peter Nagy says:

    Thanks David. This was always a struggle. So far :) It’s over!

    • David Gavrilut says:

      That’s great news, Peter! Thanks for your comment :)

  • Maggie B says:

    Thank you! This gets me out of a pickle, you must be psychic, I was just having this problem today!

    • David Gavrilut says:

      Haha I’ve heard that before! Glad I could help, Maggie :)

  • Fabienne T says:

    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

    • David Gavrilut says:

      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 :)

  • Ramesh says:

    thank you david, very helpful tutorial

    • David Gavrilut says:

      I’m happy to hear that, Ramesh :)

  • Mark Weinberger says:

    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!

    • Hanne says:

      Hi Mark, what do you mean with “Since they don’t work on mobile”?

    • David Gavrilut says:

      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.

  • deanphillips says:

    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? :)

    • David Gavrilut says:

      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? :)

  • Sascha says:

    I love your value bombs David!

    • David Gavrilut says:

      Thanks, Sascha! :D

  • Tom Z says:

    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

    • David Gavrilut says:

      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.

      • Tom Z says:

        Hi David, I already did. Thanks. Tom

  • >

    Join Thrive University (it's FREE!)