0

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

1

2 Answers 2

1

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)

1
  • Thanks for your comments here. I would like to point out the container issue first. That was my fault not copying over that part of the code. My bad, but after doing so change nothing as you would expect. I did miss off the column definition too, which I think happened while I was trying to work out what was going on here. Again, my bad sorry I also have gulp setup for auto prefixes and I did have the 'Autoprefixer' checked But the fix came from your comment about ::before & ::after. Thanks Note to self to check over the code a little more for typos before posting here. Again sorry
    – Ash Bryant
    Oct 19, 2015 at 10:14
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.