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 :)

why don't you use bootstrap responsive utilities class. With plain html it can be tested , but its cumbersome with all these variable — Pradeep
– Pradeep, Commented Jul 17, 2016 at 4:17
add a div like this: <div class=''row'> <div class="col-md-1 text-center"> </div><div class="col-md-5 "> </div><div class="col-md-6"></div></div> hope this wil help you — Pradeep
– Pradeep, Commented Jul 17, 2016 at 4:27
Hi could you please post screenshots of content at both sizes — Jacob Mulquin
– Jacob Mulquin, Commented Jul 17, 2016 at 4:27

Andi North · Accepted Answer · 2016-07-17 11:20:09Z

1

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

answered Jul 17, 2016 at 11:20

Andi North

9075 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SepticReVo Over a year ago

That resource was incredibly helpful. Thanks again for the help :)

gavgrif · Accepted Answer · 2016-07-17 04:41:13Z

1

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.

answered Jul 17, 2016 at 4:41

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

1 Comment

SepticReVo Over a year ago

Rethinking the layout helped. Thanks :)

Love · Accepted Answer · 2016-07-17 05:12:05Z

0

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

answered Jul 17, 2016 at 5:12

Love

1

Collectives™ on Stack Overflow

CSS Code Structure with PHP Loops Round 2

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related