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/yg: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-->
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.