Teleporting Columns from Armadillos into Firefoxes

stacks
blog

(Bob Kirk) #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


(Andrew Tavernor) #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.


(Bob Kirk) #3

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

http://helpforparenting.com/columns/


(Bob Kirk) #4

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


(Andrew Tavernor) #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;
}

(Bob Kirk) #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/


(Andrew Tavernor) #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%;
}

(Andrew Tavernor) #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;
}

(Andrew Tavernor) #9

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

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

(Bob Kirk) #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/ ).


(Andrew Tavernor) #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.