Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #272915

    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

    #273012

    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

    #273467

    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

    #273468

    Hi Tony!

    No, i meant this file:

    Cheers!
    Josue

    #273481

    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

    #273484

    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

    #273501

    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

    #273502

    Which browser? can you post a screenshot?

    #273526

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

    #273535

    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.

    #273540

    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

    #273545

    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

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

    #301315

    Hi @alwo!

    Can you post a link to your website please.

    Cheers!
    Josue

    #301494
    Anonymous
    This reply has been marked as private.
    #301711

    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

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