Blog Alignment

Hi guys,

I am having an issue that I never had before. I created four blogs to test the blog section and they are displaying correctly but the issue that I am having is they are not displaying 3 x 3 or 6 x 6. Each row showing only 2 blogs but it should show 3. Chould you help to resolve the problem.

Here is the code:

CSS:

Code:

/* --- Recent Blogs Starts --- */
.blog-wrapper {
  padding-top: 52px;
  margin-bottom: 9px;
}
.blog-wrapper > div > div > div:nth-child(n+1) > div:nth-child(3n+1) {
clear: both;
}
.recent-blog-header {
  text-align: center;
}
.recent-blog-header p.saperator {
  background: url(images/recent-blog-border-icon.png) repeat-x;
  background-position: center;
  text-align: center;
  max-width: 50%;
  margin: 0 auto;
  margin-bottom: 36px;
}
.recent-blog-header h1.rbh {
  margin-bottom: 36px;
}
.recent-blog-header p.rbh {
  margin-bottom: 41px;
}
.recent-posts-container {
  padding: 16px;
  border: 1px solid #acacac;
  overflow: hidden;
  position: relative;
  margin-bottom: 43px;
}
.recent-posts-container a.rbh-post-thumbnail {
  margin-bottom: 16px;
  line-height: 10px;
}
.recent-posts-container img.post-thumb {
  height: auto;
  max-width: 100%;
}
.recent-posts-container img.post-thumb:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
.recent-posts-container h3{
  margin-bottom: 16px;
}
.recent-posts-container h3 a{
  color: #000;
}
.recent-posts-container h3 a:hover {
color: #d93021;
}
.recent-posts-container p {
  text-align: left;
}
p.rbh-post-meta {
  margin-top: 38px;
}
p.rbh-post-meta a {
  color: #d93021;
}
img.rbh-readmore:hover{
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
}
img.rbh-readmore {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 13px;
  border-top: 1px solid #acacac;
  border-left: 1px solid #acacac;
  background: url(images/readmore-icon-red.png) no-repeat center;
}
 
/* --- hover effect --- */
.recent-posts-container .rbh-post-thumbnail {
    background: #b2b2b2 url(images/pattern-light.png) repeat fixed;
    display: block;
    position: relative;
    width: 100%;
    z-index: 0;
}
/* --- hover effect ends --- */
/* --- Recent Blogs Starts Ends --- */

PHP/HTML

HTML:

<!-- *** Recent Blogs Starts *** -->
<div class="blog-wrapper" id="section3">
    <div class="container">
        <div class="blog-container">
            <div class="row">
                <div class="recent-blog-header">
                    <p class="saperator"><img src="<?php echo get_template_directory_uri(); ?>/images/recent-blog-seperator-icon.png"></p>
                    <?php if (startpoint_get_option('startpoint_home_blog_heading') != '') { ?>
                    <h1 class="rbh"><?php echo startpoint_get_option('startpoint_home_blog_heading'); ?></h1>
                    <?php } else {?>
                    <h1 class="rbh">Latest posts</h1>
                    <?php } ?>
                    <?php if (startpoint_get_option('startpoint_home_blog_desc') != '') { ?>
                    <p class="rbh"><?php echo startpoint_get_option('startpoint_home_blog_desc'); ?></p>
                    <?php } else {} ?>
                </div>
            </div>
            <div class="row">
            <!-- *** Blog *** -->
            <?php
                    $limit = get_option('posts_per_page');
                    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                    $wp_query->query('showposts=' . $limit . '&paged=' . $paged);
                    $wp_query->is_archive = true;
                    $wp_query->is_home = false;
                    $thelimit = startpoint_get_option('startpoint_home_blogpost_count');
                    ?>
                 
  <?php query_posts('showposts='.$thelimit. '&order=ASC'. '&category_name=Packages'); if (have_posts()) : while (have_posts()) : the_post(); ?>
 
                <div class="col-md-4 col-sm-4 col-xs-6">
                    <div class="recent-posts-container">
                        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <div class="animated left-to-right">
                            <?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) { ?>
                    <?php startpoint_get_thumbnail(326,
                            279);
                    ?>
                <?php } else { ?>
                    <?php startpoint_get_image(326,
                            279);
                    ?>
                    <?php
                }
                ?></div>
                            <h3 class="animated bottom-to-top"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <?php the_excerpt(); ?>
                            <span>
<!-- REF-01
                                <p class="rbh-post-meta"><?php
                        $archive_year = get_the_time('Y');
                        $archive_month = get_the_time('m');
                        $archive_day = get_the_time('d');
                        ?>
                        <a href="<?php
                        echo get_day_link($archive_year,
                                $archive_month,
                                $archive_day);
                        ?>">Posted on : <?php echo get_the_time('m. d. Y') ?></a></p>
-->
<!-- REF-02
                                <a href="<?php the_permalink() ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/readmore-icon.png" alt="" class="rbh-readmore"></a>
-->
                            </span>
                        </div>
                    </div>
                </div>
                <?php endwhile;
                else: ?>
                    <div>
                        <p>
                            <?php _e('Sorry no post matched your criteria',    'startpoint'); ?>
                        </p>
                    </div>
                <?php endif; ?>
                <!-- *** Recent Blog loop Ends *** -->
 
            </div>
        </div>
    </div>
</div>
<!-- *** Recent Blogs Ends *** -->
<div class="clearfix"></div>

 

Hello,

This theme shows 3 blog in a row you can see it in inktheme's preview.

http://inkthemes.com/wptheme/startpoint-nature/?demo_redirect=no

If your theme is not displaying 3 post in a row then you have to reinstall theme.

It will resolve your issue.

Thanks & Regards
Yogesh Bhade