Forums

Give help. Get help.

  • # December 28, 2016 at 9:50 pm

    I know Firefox does not support column-span (or -moz-column-span) after all this time. But I have checked with every resource I have and can’t seem to find a work-around solution.

    Here is a simple snippet. Any ideas?
    https://jsfiddle.net/gpercifield/sakmzvt3/

    # December 29, 2016 at 3:40 am

    One-off hacky work-around, not really bullet-proof solution maybe using @supports:

    @supports not (column-span: all) {
      .span-3-columns {
        position: absolute;
        top:0;right:0;left:0;
      } 
    }
    

    # December 29, 2016 at 9:56 am

    @atelierbram The problem there is that introducing extended or different amounts of content will create overlapping content.

    A friend of mine just recent proposed a solution. It involves a little bit of js, but that sames to be the only way to do this.

    Check this page out and resize the window to see it in action and view the source:
    http://4-next.com/nv/test.cfm
    Or on codepen…

    It is in cfm just for some added functions of varying content sizes on refresh. You’ll see the js in the source.

    Basically what it does:
    1. Adds breakpoints to change the number of columns based on browser size (3 points – will change color of blocks for each.)
    2. Adds some javascript to watch the size of the spanned div and then adjust the padding of the main container.

    # December 29, 2016 at 1:15 pm

    Still quite minimal amount of JavaScript; I like it! But I like feature detection too, if only to be able to apply the CSS to supporting browsers. Apparently this also works in JavaScript:

    function myFunction() { 
        // https://tiffanybbrown.com/2015/03/css-supports-api/
        // https://dev.opera.com/articles/native-css-feature-detection/
        var notSpanny = CSS.supports('not (column-span: all)');
    
        if (notSpanny) { 
             console.log('I do not support column-span:all!');
            // the code for the extra added padding here
        } else {
          console.log('I support column-span:all!');
        }
     }
    myFunction()
    

    now in CSS we can do:

    .span-3-columns {
      column-span: all;
    }
    
    @supports not (column-span: all) {
        .span-3-columns {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
    }
    

    My fork of your demo

    # August 16, 2018 at 3:44 am

    Found this looking for a cross-solution as well since FF still doesn’t support the span in 2018(!)

    If I understand correctly, you have a scenario like:

    Title
    Content Content Content

    what I’ve done is targeting only the Content (P in my case) for the column behaviour.

    Not sure if this is what you had been looking for but if that’s the case is very basic solution.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag