This quick tutorial is for anyone struggling with floating items inside of columns in Thrive Architect (or Thrive Leads).
For the longest time I thought this was a glitch, but I think this may be working as intended. Here's the problem.
Can't Float Icons and Images Inside of Columns in Thrive Architect
If you put an image or an icon inside of a column, then try to float it left or right aligned, you'll quickly notice the object doesn't move or respect the float.
I tried forcing margins, custom CSS fixes, absolute positioning (which can work in some cases, but it's not ideal), and even manually putting in spaces. Nothing worked!
Then I realized the solution was much simpler.
SOLUTION: Properly Float Icons and Images Using a Content Box
Step 1: Put a content box inside the column.
Step 2: Add your image, icons, and text into the content box.
Step 3: Go to Layout & Position and set your Alignment.
Step 4: under Layout & Position expand the Advanced tab, and press the check next to Float.
Your content will now successfully float within the column!
That's it! That's really all there is to it.
Whenever in doubt about how you should organize your objects in Thrive Architect, always try placing elements within a content box first. This follows the 'outside-in' design philosophy of making changes to container elements before making changes to the actual elements themselves, and also makes duplicating and organizing your page's elements much easier.
If you have any questions, feel free to leave a comment.
Thank you for your great video tutorial: You really helped me a lot! I had first searched the knowlegde base of Thrive Themes unsuccessfully – and then landed on your website via Google. Now I am really happy!
Quick and clear, thank you!
Hey, Thank you for videos like this. You have taught me a thing or 3 over the years. And Im hoping the new company that bought thrive doesnt screw it up.
I have a question. If I am trying to create a list of lets say 4 text items. And I want to keep uniform style in the way that the list elements function. But I dont want a number, or an icon.
What is the best way to go about that? the use Case I have now is that I want to reduce the padding between 4 lines of text on mobile. And Im not sure the best way to do that for quick and easy adjusting of padding on all lines of text.
Use a styled list element and adjust the line height and text spacing. This will give you a uniform list and you can change it to a bullet icon. Alternatively, you must styling your bullet lists in Thrive Theme Builder’s typography.
Thank you SO much for this. I didn’t have columns, so I put the whole post into a content box, and it worked just as well. Thrive no longer offer individual plug-inn support for Architect so this post was a life-saver.
Great video. Solved my problem and helped me understand best practice too (always use a content box!)