Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 1, 2014 at 4:39 am #272915
    morpho2014

    Hi,

    I have three 1/3 width columns with text. Can I set the text to flow automatically from one column to the next?

    Many thanks in advance,

    Tony

    June 1, 2014 at 7:45 pm #273012
    Josue

    Hi Tony!

    1. Put this in your theme functions.php:

    add_theme_support('avia_template_builder_custom_css');

    2. Put all the text inside a Text Element inside a single column (1/1).

    3. Assign a class to that Text Element (ex: fluidcolumns).

    4. Add this to the Quick CSS:

    .fluidcolumns{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

    Best regards,
    Josue

    June 2, 2014 at 7:33 pm #273467
    morpho2014

    Hi Josue,

    Many thanks for that.

    I’m afraid I don’t understand coding at all. Under ‘Appearance’ ‘Editor’ I found a file ‘functions-enfold.php’ – assuming that is the correct file, please could you point me to where in the code I need to place the text you gave me under 1?

    Many thanks.

    Best wishes,

    Tony

    June 2, 2014 at 7:46 pm #273468
    Josue

    Hi Tony!

    No, i meant this file:

    Cheers!
    Josue

    June 2, 2014 at 8:12 pm #273481
    morpho2014

    Many thanks Josue. That worked. But the problem is now it displays unreadable on an iPhone, as it displays 3 columns, rather than adapting it to the iPhone screen. What do you suggest?

    Best wishes,

    Neil

    June 2, 2014 at 8:17 pm #273484
    Josue

    Hi Neil!

    Change:

    .fluidcolumns{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

    To:

    @media only screen and (min-width: 767px) {
.fluidcolumns{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
}

    That way it will only be applied when the screen is 767px width or more.

    Cheers!
    Josue

    June 2, 2014 at 9:25 pm #273501
    morpho2014

    Great, thanks Josue. Fixed it on the iPhone. I noticed that when viewing the 3 column on a regular laptop – the first column beginning does not line up with the 2nd and 3rd column. Can that be fixed?

    Many thanks.

    Best wishes,

    Tony

    June 2, 2014 at 9:28 pm #273502
    Josue

    Which browser? can you post a screenshot?

    June 2, 2014 at 10:12 pm #273526
    morpho2014

    Thanks Josue. It’s on the iPad using Safari. How do I send you the screenshot?

    June 2, 2014 at 10:21 pm #273535
    Josue

    I though you were referring to a ‘regular laptop’. You can upload it to a service like Imgur or Dropbox, then post the link here.

    June 2, 2014 at 10:31 pm #273540
    morpho2014

    Thanks Josue. I now have a new problem. I use WP Engine as a host. They have a staging area where I made the changes. They have copy from staging to live function, which I used. But now the site on the live area is not displaying 3 columns, just 1. The staging site still shows the 3 columns. Any idea what’s happening?

    Many thanks.

    Best wishes,

    Tony

    June 2, 2014 at 10:33 pm #273545
    Josue

    Changes made in the staging area may take sometime to take effect in live. I think it would be best to contact WPEngine support for this matter.

    Cheers!
    Josue

    August 7, 2014 at 7:04 pm #301273
    Anonymous

    There is still an unanswered question here:

    I noticed that when viewing the 3 column on a regular laptop – the first column beginning does not line up with the 2nd and 3rd column. Can that be fixed?

    So, can it be fixed? I experience the same problem.

    August 7, 2014 at 8:15 pm #301315
    Josue

    Hi @alwo!

    Can you post a link to your website please.

    Cheers!
    Josue

    August 8, 2014 at 9:09 am #301494
    Anonymous
    This reply has been marked as private.
    August 8, 2014 at 4:42 pm #301711
    Devin

    Hi!

    You will need to modify the default margin on the paragraph content inside since the columns don’t inherit it with the css right now:

    
.fluidcolumns p{
    margin-top: 0;
}

    Best regards,
    Devin

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.