Hopefully this is the right place to post this question, if not, sorry! I can’t figure out why my content elements are overflowing outside the grid. I read through the roots wrapper and roots 101 and still can’t figure out why my grid isn’t lining. Here is some code
This is at the bottom of my front-page.php
<div class="container"> <!-- Container in front-page.php -->
<div class="col-lg-12">
<?php
$args = array(
'post_type' => 'post',
'post_per_page' => 10
);
?>
<?php
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php get_template_part('templates/content', ( 'recipe' == get_post_type() ? 'recipe' : get_post_format() )); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
And then I'm calling different posts in different content.php pages (content-gallery.php, content-quote.php, etc..). Here is the code in content-quote.php:
<section class="m-blog-box m-quote-box col-lg-3 col-md-6 col-sm-12 <?php filter_post() ?>">
<article <?php post_class(); ?>>
<div class="entry-summary">
<?php the_excerpt(); ?>
<h5>-- <?php echo get_post_meta($post->ID, '_format_quote_source_name', true); ?></h5>
</div>
</article>
<header>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?//php the_title(); ?></a></h2>
<?//php get_template_part('templates/entry-meta'); ?>
</header>
<section class="m-box-info-bar">
<a href="#" class="dashicons dashicons-format-quote"></a>
<a href="#" title="" class="m-infobox-time"><?php the_time('F j') ?></a>
<a href="#" title="" class="m-infobox-time"><?php the_time('Y') ?></a>
<a href="#" class="dashicons dashicons-format-chat"></a>
<a href="#" class="dashicons dashicons-share-alt2"></a>
</section>
</header>
</section>
</section>
I’m trying to get 3 columns to go across but they aren’t centered. When I offset them, a the overflow on the right increases.
https://www.dropbox.com/s/k3zu6p5v320of7d/Screenshot%202014-08-05%2015.36.37.png (not centering)
here is my css for the boxes
.m-blog-box {
border: 1px solid #d5d5d5;
position: relative;
// width: 20em;
margin: 1em 1em 0em 1em;
padding: 0;
@media (max-width: 480px) {
max-width: 100%;
width: 20em;
}
}
I commented out the width because I thought it might be better for the columns to define the width of the box. Any help in the right direction is highly appreciated. Let me know if I need to put more info in there! Thanks.