Twitter Bootstrap Question posted in

Twitter bootstrap – Inconsistent flexbox layout between browsers (Chrome & Safari)

I’ve been putting together a block that will display latest posts from WordPress in a grid (Twitter Bootstrap) and I decided to ‘play’ with flexbox for the first time.

I’m getting my head around it slowly, but I’m finding that Chrome and Safari display things differently.

Am I missing something?

HTML

<div class="col-xs-12 forcontent element-contents element-latest-posts" role="document">
        <div class="content row">



                <div class="latest-posts ">


<div class="row">
            <article class="col-xs-12 col-md-4">
        <header>
            <h2 class="entry-title"><a href="/stc/holidays/uncategorized/yet-another-test-post/">Yet another test post</a></h2>
        </header>

                    <section class="featured-image">
            <a href="/stc/holidays/uncategorized/yet-another-test-post/" class="featured-image-link">
                <img src="/stc/wp-content/uploads/2015/05/180H.jpg" class="attachment-post-thumbnail wp-post-image" alt="180H">             </a>
        </section>

        <section class="entry-summary">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non me</p>           </section>
        <footer>
            <p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:03:00+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 23 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
            <a href="/stc/holidays/uncategorized/yet-another-test-post/" class="btn btn-default btn-block featured-image-link">
                Continued               </a>
        </footer>
    </article>
            <article class="col-xs-12 col-md-4">
        <header>
            <h2 class="entry-title"><a href="/stc/holidays/uncategorized/another-test-post/">Another Test Post</a></h2>
        </header>

                    <section class="featured-image">
            <a href="/stc/holidays/uncategorized/another-test-post/" class="featured-image-link">
                <img src="/stc/wp-content/uploads/2015/05/188H.jpg" class="attachment-post-thumbnail wp-post-image" alt="188H">             </a>
        </section>

        <section class="entry-summary">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>            </section>
        <footer>
            <p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:02:29+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 24 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
            <a href="/stc/holidays/uncategorized/another-test-post/" class="btn btn-default btn-block featured-image-link">
                Continued               </a>
        </footer>
    </article>
            <article class="col-xs-12 col-md-4">
        <header>
            <h2 class="entry-title"><a href="/stc/holidays/uncategorized/a-large-post/">A large Post</a></h2>
        </header>

                    <section class="featured-image">
            <a href="/stc/holidays/uncategorized/a-large-post/" class="featured-image-link">
                <img src="/stc/wp-content/uploads/2015/04/slide-3.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-3">               </a>
        </section>

        <section class="entry-summary">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>          </section>
        <footer>
            <p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:16:54+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
            <a href="/stc/holidays/uncategorized/a-large-post/" class="btn btn-default btn-block featured-image-link">
                Continued               </a>
        </footer>
    </article>
            <article class="col-xs-12 col-md-4">
        <header>
            <h2 class="entry-title"><a href="/stc/holidays/uncategorized/test/">test</a></h2>
        </header>

                    <section class="featured-image">
            <a href="/stc/holidays/uncategorized/test/" class="featured-image-link">
                <img src="/stc/wp-content/uploads/2015/05/168H.jpg" class="attachment-post-thumbnail wp-post-image" alt="168H">             </a>
        </section>

        <section class="entry-summary">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>          </section>
        <footer>
            <p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:14:06+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
            <a href="/stc/holidays/uncategorized/test/" class="btn btn-default btn-block featured-image-link">
                Continued               </a>
        </footer>
    </article>
            <article class="col-xs-12 col-md-4">
        <header>
            <h2 class="entry-title"><a href="/stc/holidays/uncategorized/hello-world/">Hello world!</a></h2>
        </header>

                    <section class="featured-image">
            <a href="/stc/holidays/uncategorized/hello-world/" class="featured-image-link">
                <img src="/stc/wp-content/uploads/2015/04/slide-6.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-6">               </a>
        </section>

        <section class="entry-summary">
            <p>Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit ali</p>           </section>
        <footer>
            <p class="byline author vcard"><time class="updated" datetime="2015-03-19T14:48:48+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="19th March, 2015"><i class="fa fa-clock-o"></i> Posted 7 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
            <a href="/stc/holidays/uncategorized/hello-world/" class="btn btn-default btn-block featured-image-link">
                Continued               </a>
        </footer>
    </article>

</div>

LESS

.element-latest-posts {

    .latest-posts .row {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;

    }


    article {
        flex: 0 auto;
        // flex: 1 auto;

        margin-bottom: 15px;

        &:first-of-type {
            flex: 1 auto;
        }

        &:last-of-type {
            flex: 0 auto;
        }

        display: flex;
        flex-flow: column;
        justify-content: flex-start;

        section {
            flex: 1 auto;

            &.featured-image {
                // display: none;
                a {
                    display: block;

                    &:hover {
                        transform: scale(0.8);
                        outline-width: 0 !important;
                    }

                    img { max-width: 100%; }
                }
            }

            &.entry-summary {
                display: flex;
                flex-flow: column;
                justify-content: center;

                &.no-featured-image {}

                span {
                    flex: 1 auto;
                }
            }
        }

        footer {
            a {
                &.btn {
                    &:hover { border-color: transparent; }
                }
            }
        }



    }
}

Screen Shots

Safari
Chrome

Any ideas why this is?

Thanks

Tags:

2

Answers


  1. 0

    I notice that you don’t wrap your outer column (bootstrap col) in a div with class=row. I’m pretty sure you should always have rows wrapping columns when using bootstrap.

    Login or Signup to reply.
  2. 0

    First of all, your Bootstrap is done incorrectly. You are not supposed to have a row inside a row without a column in between. And you should never have a column without a row. You also should really not have columns that add up to more than twelve at each break point.

    This is wrong:

    <div class="row">
  <div class="row"></div>
</div>

    This is also wrong:

    <div class="col-xs-8">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>
<div class="col-xs-4"></div>

    In order to keep Bootstrap working correctly, the only thing that can be a child of a row is a column, and the direct parent of a column must be a row. This is because columns are floated and the row clears the float.

    This is correct:

    <div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
      </div>
      <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
      </div>
    </div>
    <div class="col-xs-4"></div>
  </div>
</div>

    Secondly, you do not need to specify col-xs-12 here: <article class="col-xs-12 col-md-4">. All col-xs-12 does is say “width: 100%”, which is already applied by being a block-level element.

    Thirdly, you should be using container or container-fluid to add the left and right padding to the edge (not col-xs-12).

    Fourthly, ::before and ::after (part of the clearfix on the row) count as children of the row. This means if you use display: flex on the row, it will apply flexbox to the ::before and ::after psuedo elements as well.

    Lastly, Safari still needs vendor prefixes.

    Here is the updated pen with it working in Safari: http://codepen.io/anon/pen/rOYxNG (Note that “Autoprefixer” is checked in the CSS options)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search