CSS Code Structure with PHP Loops Round 2

Question

Round 2: Trying to figure out why my content looks fine when screen size is under 992px but not when it is over. Everything looks fine in the lower screens but hardly anything is in the right place in full screen size. I have a feeling it's because of the containers inside the loop, but I'm not sure how to properly take them out without it forcing everything into a narrow column from the .col-md-1 container.

<?php get_header(); ?>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Blog</h1>
        <ol class="breadcrumb">
            <li><a href="#">Home</a>
            </li>
            <li class="active">Blog</li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-lg-8">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="col-md-1 text-center">
            <p><?php the_time('l, F jS, Y'); ?></p>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="col-md-5">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
                </a>
            </div>
        <?php endif; ?>
        <div class="col-md-6">
            <h3>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h3>
            <p>by <?php the_author_posts_link(); ?>
            </p>
            <p><?php the_excerpt(); ?></p>
            <a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
        </div>
<hr>
<?php endwhile; ?> 
                    <div class="navigation"><p><?php posts_nav_link('','&laquo; Newer Posts','Older Posts &raquo;'); ?></p></div>
                </div>
    <?php include 'include.php'; ?>
</div>
<?php else: ?>
  <p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>

Any insight is greatly appreciated :)

Answer 1

Just give it a try with col-xs- col-md- col-lg- col-xl-

if you need any other info just see the bootstrap "grid system"

http://getbootstrap.com/css/#grid-options

Answer 2

As has been mentioned by others, you need to use some additional grid classes.

For your 8 | 4 grid to work on medium and large devices, you would need to use col-md-8 col-lg-8 on your content area and col-md-4 col-lg-4 on your sidebar.

You'll also want to make sure that your blog posts grids have col-lg-* classes alongside their col-md-* classes.

For your layout to work properly on mobile and tablet devices you'll also want to add some col-xs-* and col-sm-* classes.

For more information on the Bootstrap grid system, I would recommend you view: https://getbootstrap.com/css/#grid

Answer 3

My guess is that its because you are using

<div class="col-lg-8">

but not filling the remaining 4 columns at the lg size (and all contained elements are of the-md class so display fine) and also not clearing the float - so at lg size your elements will be floating next to each other and out of position at the large size but not at smaller sizes where they will display as full rows.

you need to rethink your layout (and either have it go full screen) or add a clearfix class to the parent rows to ensure that the floats are cleared before adding the next row.

Always remember that 12 is the magic number - you don't have to use all the columns (and having col-lg-8 is absolutely fine) but if you dont fill the row you need to clear the float from it - Bootstrapp adds a float:left to the column classes - hence giving your dodgy layout only at the lg size.