Teleporting Columns from Armadillos into Firefoxes

RapidWeaver Classic Stacks
,
1

I am using Armadillo to make a small site for a client. I find that the inbuilt blog on many themes leaves a larrge amount of wasted white space, especially if blog entriea are small. Enter the Mirage 4 theme which allows multiple columns. Perfect, or so I thought until I realised that while this works well for 2 columns in Safari it does not in Firefox. It leaves a blank second column (doesn’t wrap).

Wiil Woodgate from SeyDesign informs me that expecting Armadiilo to wrap in columns in Mirage is a bridge too far. He suggested using a stack to do this and being an intrepid adventurer I took on this bold challenge.

I used TeleportMe to transfer the Armadillo blog into ParagraphPro. Success at last…or so I thought. Again it worked perfectly in Safari but left a blank column in Firefox. ParapahPro works fine with normal text (I haven’t tested it with with non-Armadillo teleporting yet).

Any ideas, why not Firefoxes.

Bob

2

You can try setting the Tag setting in Paragraph Pro to General Text Node (CMS compatible) but we would really need to see a URL to a published test page to see what is going on.

3

I have setup a page that demonstrates the problem using an Armadillo Solo Content (same result as a blog).

http://helpforparenting.com/columns/

4

CMS Compatible makes no difference. I have added a url below.

5

It is the hidden overflow settings of the stacks that you are importing that is preventing the columns from displaying in Firefox. This is a pretty easy fix with a little CSS.

If you add the following to either the page inspector or the site-wide CSS if you want to use this on several pages it should sort it out.

.ppro.columnize .stacks_out, .ppro.columnize .stacks_in{
  overflow: visible!important;
}
1 Like
6

Thanks for the correction.

Partial success, Works for Armadillo Content (page2) but the blog page has some formatting problems to do with margins. See http://helpforparenting.com/

7

We can fix that as well, just add the following in addition to the previous CSS which will limit the Armadillo content to the width of the columns.

.ppro.columnize div{
  max-width: 100%;
}
1 Like
8

We can even further improve the appearance if you would like to prevent each blog entry getting split between columns:

.ppro.columnize .blog-entry{
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
1 Like
9

…and to stop the blog images overflowing (sorry missed this one before)

.blog-entry-body img{
  max-width: 100%;
}
1 Like
10

Congratulations, you answered my questions before I got to ask them. The image adjustment improves on the original setting. In Safari the image was cut off to fit the column, now it is shrunk to fit the width.

I have one more question. Firefox has an orphan on the second page, Safari does not. Is there an adjextment I can make to solve this? ( http://www.helpforparenting.com/page/ ).

11

There is not a lot you can do about that I’m afraid as it is just a line break <br> .

Applying the same break-inside method to the paragraph in the blog post would just shift the entire block of text into the next column.

If the text was made up of separate paragraphs instead of one paragraph with line breaks it would be possible but as it is there is no selector that we can apply the instruction to.