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