Results 1 to 1 of 1

Thread: Bootstrap/Flexbox equal column height. Why do the columns break on iPad

  1. #1
    Junior Member
    Join Date
    Sep 2016
    Posts
    1

    Question Bootstrap/Flexbox equal column height. Why do the columns break on iPad

    Working on what is now a very rough draft of a bootstrap site: http://www.breadbitebakery.com/test/index.html | CSS is at http://www.breadbitebakery.com/css/breadbite.css

    Getting the columns to be of even height in the "menu" row, below the main billboard is proving to be very difficult. (Anything vertical, e.g., equal column height, vertical alignment, etc., seems to pose a real challenge for CSS.)

    The latest code I have found for equal column height is below. However, it *sometimes* (and that's kind of weird) forces the columns to wrap. I can't find anything in the code that ought to do that. If anyone has an idea of how to achieve equal column height without throwing off the column wrap, I'd be extremely grateful. I've looked at several options that claim to provide responsive equal column height, but, so far, they have all failed.

    /* EQUAL COLUMN HEIGHT */

    .row.is-flex {
    display: flex;
    flex-wrap: wrap;
    }
    .row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
    }

    /*
    * And with max cross-browser enabled.
    * Nobody should ever write this by hand.
    * Use a preprocesser with autoprefixing.
    */
    .row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }

    .row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }

    /* END EQUAL COLUMN HEIGHT */
    Last edited by TOSONA; 09-30-2016 at 03:59 PM. Reason: change in status

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •