0

First time trying this and I know I've got someting backwards or upside down. I have a feeling I have my loop a little messed up too because the styling changes with each blog post. It is weird.

My main question however = How do I get these posts to display horizontally and not vertically?? Is my loop messed up? Is my CSS the issue instead (my best guess).

Here is the div site

Here was my demo site for how I wanted it to turn out to look. I'm just showing this site so you totally "visually" understand what I am trying to accomplish.

Here is my code. It's much appreciated if I can get any help at all with this issue as it has caused me so many headaches. This is my first time doing a Wordpress template from scratch, and is definitely a learning experience.

#blog_section {
    float: none;
    height: auto;
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 19;
    margin-top: 0px;
    margin-left: auto;
    clear: none;
    background-color: rgb(26, 26, 26);
    min-width: 0px;
    padding-top: 8%;
    padding-bottom: 8%;
    margin-right: auto;
    padding-right: 5%;
    padding-left: 5%;
}

.blog_image {
    float: left;
    width: auto;
    max-width: 99.260651%;
    height: auto;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 21;
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 0%;
    clear: none;
    margin-right: 0%;
    display: block;
}

.home_blog_title_content {
    float: left;
    font-size: 1em;
    width: 100%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    margin-left: 0%;
    margin-top: 0px;
    margin-bottom: 5px;
    clear: both;
    min-height: 0px;
}

.home_text_title {
    font-family: open-sans;
    color: rgb(255, 255, 255);
    line-height: 1em;
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 15px;
}


.home_text_content{
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: open-sans;

}

.home_text_content a {
    color: rgb(99, 130, 140);
    font-family: open-sans;
    line-height: 1.35em;
    font-size: .85em;

}

.home_text_content a:active {
    color: rgb(57, 155, 187);
}

.home_text_content a:hover {
    color: rgb(57, 155, 187);
}

.home_text_content p{
    font-family: open-sans;
    color: rgb(212, 211, 209);
    line-height: 1.35em;
    font-weight: 100;
    font-size: .85em;
}
<!-- BEGIN BLOG CALL-OUT SECTION--> 
    <div id="blog_section" class="clearfix">
        <div class="blog_posts_container">
                
                 <?php 
$rp_query = new WP_Query( 'showposts=3' ); 
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
               

                   <!-- Blog Thumbnail-->
                   <div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
                
                   <!-- Blog Post Date/time-->
                   <p class="post">
                   <span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
                   </p>
                
                   <!-- Blog Title-->
                   <p class="home_blog_title_content">
                   <span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
                   </p>
                          
                   <!-- Blog Content-->
                   <div class="home_text_content">
                   <?php the_excerpt(); ?>
                   <a href="<?php the_permalink(); ?>">Read More</a></li>
                   </div>
  
                  <?php endwhile; ?>
                  <? endif; ?></div> 
                  <?php wp_reset_postdata(); ?>           
              
    </div>
<!-- END BLOG CALL-OUT SECTION--> 

1 Answer 1

1

you need to put some type of wrapping div around the individual posts

<!-- BEGIN BLOG CALL-OUT SECTION--> 
    <div id="blog_section" class="clearfix">
        <div id="Blog_array_posts_container" class="clearfix">
                <?php 
                  $rp_query = new WP_Query( 'showposts=3' ); 
                   if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>

                   <div class="post-wrapping-div">
                         <div id="blog_image" class="image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
                             <li><?php the_post_thumbnail('full'); ?><b/>
                        </div>
                        <p class="home_blog_title_content">
                        <div class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><br/></span>
                        </p>
                        <div class="home_text_content">
                     </div>

                   <?php the_excerpt('Read More...'); ?>
                       <a href="<?php the_permalink(); ?>">Read More</a></li>
                  <?php endwhile; ?>
                  <?php wp_reset_postdata(); ?>
                  </ul>
                 <? endif; ?>
            </div>
        </div>

Then give that div a width and float them or display block however you choose to lay them out. Sorry just noticed your demo site so try

.post-wrapping-div { width:33%; float: left; padding:0 20px; } 
5
  • also not sure what is going on with your closing </li> and </ul> tags down there
    – Nickfmc
    Commented Jan 22, 2015 at 3:36
  • Sorry, I updated the code, I had posted some old code by accident, let me update it. Now it is updated.
    – Tyrii
    Commented Jan 22, 2015 at 3:37
  • It looks like the wrapper is working! Now it looks like I just have a little styling to do. What do you think?
    – Tyrii
    Commented Jan 22, 2015 at 3:52
  • So my last and final issue I have is getting that divider that is on the demo site in between each blog. Do you think that is even possible?
    – Tyrii
    Commented Jan 22, 2015 at 3:57
  • take the float:left and the display:inline-block off of .blog_posts_container that will get you started by getting the blog section within the width of your screen
    – Nickfmc
    Commented Jan 23, 2015 at 4:04

Your Answer

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

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