Bootstrap 3 site row problem in WordPress custom theme

Hello guys,

I really hope that somebody can point me to the right direction i have a problem here. In my static design i have a ROW with 3 columns col-lg-4 which is 100%. But here comes the problem now it displays 4 posts in a row even when i use the COL-LG-4 etc. I dont understand why is the PHP code even if its within the CLASSES and a ROW adding another col…? So what is the deal here? Can anybody help me out here?

See picture:

http://s29.postimg.org/blrqncl9x/ROW.png EDIT Broken URL meant this instead?
http://s29.postimg.org/g7nuvp6t1/ROW.png

My code:

<!-- =========== wpa-service =========== -->
    <div class="wpa-service">
        <div class="container container-lg-height container-md-height container-sm-height">
            <div class="row">
				
			   <?php $query = new WP_Query(array('post_type' => 'wpa_diensten', 'posts_per_page' => -1));  ?>
				<?php if($query->have_posts()): global $more;  ?>
				<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
				
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top">
                            <span class="wpa-service-bim-image"></span>
                                <h1><?php the_title(); ?></h1>
					
 					            <?php if ( has_post_thumbnail($post->ID) ): ?>
					                <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class'	=> "img-responsive")); ?></p>
					            <?php endif; ?>                               
					
								<?php the_content(); ?>
			 		
								<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
                </div><!-- end: col -->
				
 
				<?php endwhile; ?>
			<?php endif; ?>
			</div>
		</div>
    </div>
 <!-- =========== end: wpa-service =========== -->

Can you post the ‘view source’ of that code as I don’t do PHP so I need to see what the final html is looking like and whether it is malformed.

Hi Paul!!!

take a look at http://www.balkaneros.nl you will see the rows + css.

Thanks!

I don’t think it is a bootstrap issue.
Bootstrap would not add a column buy its own volition. & looking at the source code we see four columns, the last one scrunched in because it is not fitting.
I think it is wordpress.
It has the posts and it is putting them there.
so you could limit the posts by one per category. or call them by id.
D

Nice site btw.

Thanks i am not finished yet i need to add content pics etc. So what do you suggest? Because i am loading ONE col-4 for EACH post so what do you suggest me to do? what to change?

HI,

I am not sure what you are trying to accomplish here?

You are outputting 4 columns across and that’s what you are getting. If you only want 3 columns across then you can’t use display:table-cell because cells won’t wrap unless you output a new row. The same will apply for floats and unless you start a new row or add a clearer otherwise the float will snag when it wraps.

Your options are to ouput the columns in groups of three and output a row around then at the same time in your php.

Alternatively you could try using display:inline-block which will allow element to start on a new line:

.col-md-height {
display: inline-block;
width:33%;
float:none;
}

I also note that your classes are corrupt (although it has nothing to do with this problem).

You have this:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top class="post-90 wpa_diensten type-wpa_diensten status-publish hentry clearfix"">

It should be this:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top post-90 wpa_diensten type-wpa_diensten status-publish hentry clearfix">

The point being that you have nested a class attribute inside a class attribute rather than just the classnames.

class="post-90 wpa_diensten type-wpa_diensten status-publish hentry clearfix"

Hello paul,

Thanks for the extended answer. Yes i have replaced the div now thanks. The reason why i am using table-cell is because of the equal heights boxes… otherwise the content is a mess. So what do you suggest me to do? Since i am using PURE equal heights on css… is there another way to fix this?

this is some wp code in case the issue is wp & not css related. by courtesy of @WebMachine i have been using this code to select a post w/in specific category.

	<div id="news" class="latestNews">
		<?php
			$args = array(
				'category_name'     => 'news',
				'posts_per_page'      => 1
				 );

			$my_query = new WP_Query( $args );

			if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>					 
			<div class="slotHead"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php the_excerpt(); ?></a></div>
			<div class="slotCat">  <?php the_category(); ?> </div>
			<?php
			the_post_thumbnail();
			endwhile;
			endif;
			wp_reset_query(); 
		?>
	</div> <!-- end news -->

in that case you make your post, apply your category e.g. “news” & you’ll have the newset post in that category.

in this other sample. a bit more static. but would work well w/pages.
use the shortlink to indicate what page you want.
e.g.

<a href="index.php?p=97"></a>

the 97 in this case being the shortlink that you can get by going to the page you selected and then clicking on the button “get shortlink”

D

@PaulOB I do have a bootstrap qustion for you.
does it matter the order you put your column classes in?
would

class="col-lg-4 col-md-4 col-sm-6 col-xs-12"

work out the same as

class="col-xs-12  col-sm-6col-md-4 col-lg-4"

?
thx
D

No it doesn’t matter. Its the order in the stylesheet that wins out (assuming all other things are equal).

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.red {background:red}
.blue {background:blue}
</style>
</head>

<body>
<div class="blue red">This will be blue</div>
</body>
</html>

I didn’t see any equal heights as they all have the same background color. If there are no visual column colours then the inline-block method I mentioned will work.

If however you want three different column background colours/borders all matching in height then you need display:table-cell and then output rows and columns in your php code .

Are you going to colour the columns?

Could this be a result of you needing it to insert another

</div>
<div class="row">

after every 3rd (col-sm-4) box? If so try adding this to the file:

 <?php $i = 0; ?>
 <?php $i++; ?>
 <?php if ((++$i % 3) == 0) : ?>
  </div>
  <div class="row">

I’ve added it into your code below, but I can’t guarantee it is all in the right places. :smile:

<!-- =========== wpa-service =========== -->
    <div class="wpa-service">
        <div class="container container-lg-height container-md-height container-sm-height">
            <div class="row">

         <?php 
         $i = 0;
         $query = new WP_Query(array('post_type' => 'wpa_diensten', 'posts_per_page' => -1));  ?>
        <?php if($query->have_posts()): global $more;  ?>
        <?php while($query->have_posts()): $query->the_post(); $more = 0; $i++; ?>

                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top">
                            <span class="wpa-service-bim-image"></span>
                                <h1><?php the_title(); ?></h1>

                       <?php if ( has_post_thumbnail($post->ID) ): ?>
                          <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class'	=> "img-responsive")); ?></p>
                      <?php endif; ?>                               

                <?php the_content(); ?>

                <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
                </div><!-- end: col -->


              <?php if ((++$i % 3) == 0) : ?>
                
              </div>
              <div class="row">

             <?php endif; ?>
                  
        <?php endwhile; ?>
      <?php endif; ?>
      </div>
    </div>
    </div>
 <!-- =========== end: wpa-service =========== -->

Hope this helps. :smile:

1 Like

Hello there,

thanks for the HELP however i get this now:

http://s28.postimg.org/wutb9z2ss/result.jpg

can you please help me to solve me this? On the NEW row the COL should ONLY be COL-4 and SHOW one BOX.

Thanks!

Same answer as before:)

You are using display:table-cell and it will stretch all the way across if only one cell.

Remove col-lg-height as it doesn’t look like you need equal columns at all.

1 Like

remove all the col-#-height's

1 Like

@bpartch @PaulOB @pdxSherpa

Thanks guys! now i only have this problem… can somebody please tell me how to make the COLLS equal with Javascript? I have found a lot of scripts… but for some reason not working at all.

balkaneros.nl take a look

thanks guys!

I’ve asked you this question a number of times now and why do you need equal column heights? You don’t have any column colours so it is irrelevant that they have the same height!

You will need to explicitly clarify this question because I must be missing a requirement that you need. Are you going to add different column colours or borders? Besides I already gave you the solution for equal columns anyway and you just had to account for it properly in your php and output 3 cells at a time for each row (just as in a real table).

You don’t want to use JS for making equal heights in a fluid site as that will make the site very jerky because you wlil need to recalculate the height at every pixel change of width.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.