Column height responsive to text - css

I want a row with 3 columns, that depending on the length/size of the text inside of one of the columns, all 3 columns should have the same height. So, the 3 columns should have the same height and be in the same row taking into account the biggest sized column.
This is the error that I get:
http://prntscr.com/d4getm
This is the code that I have:
<?php// Define our WP Query Parameters ?>
<?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>
<?php// Start our WP Query ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><?php the_post_thumbnail(array(100, 100)); ?>
<div class="caption">
<?php// Display the Post Title with Hyperlink?>
<h3 class="center"><?php the_title(); ?></h3>
<!--// Repeat the process and reset once it hits the limit-->
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
And this is the CSS:
div.caption{
text-align: center;
}
div.thumbnail{
border: 4px inset black;
height: 200px;
}
h3.center{
font-size: 20px;
}

The answer is found here: How can I make Bootstrap columns all the same height?
For this particular problem some adjustments need to be made to the html structure in order to get it to work.
I've replicated what I imagine your final html looks like once the php is executed. Here's a js fiddle: https://jsfiddle.net/qpwgkgfe/39/
UPDATE: Here is jsfiddle solution made responsive using bootstrap classes: https://jsfiddle.net/qpwgkgfe/44/
Basically, there are a few things you need to remove. First is the internal div with class thumbnail. You can get the same effect by moving the class to the parent div. Secondly, you need to remove the height: 200px from your CSS file. This setting will over-ride the attempts to make the columns match.
I've used the flex-box approach because it's new and fun, but with some adjustments the other solutions would work as well.
Here's another js fiddle using the -margin approach: https://jsfiddle.net/v92g0ddk/3/
You'll need to work out the bottom border though.

Related

CSS :nth-child() in div display of data

I am displaying a recordset using div and want to change the background color on alternating rows. I have done this successfully in the past using an HTML table, but I can't figure it out using div.
The data displays properly, but there is no color other than the page's background color.
I assume it is something very simple that I am doing wrong, but I can't see it.
Here is the relevant code section and the CSS styles I tried (in a related css file). I tried both odd and even. Neither worked. And the ".indexrow{background-color: #94C8F2;}" doesn't work either.
<div class="indexrow">
<?php
$wa_startindex = 0;
while(!$rsTitle->atEnd()) {
$wa_startindex = $rsTitle->Index;
?>
<div class="column left">
<?php echo($rsTitle->getColumnVal("Title")); ?>
</div>
<div class="column middle">
Issue: <?php echo($rsTitle->getColumnVal("IssueID")); ?>
</div>
<div class="column right">
Page: <span class="BlackHeadline3"><?php echo($rsTitle->getColumnVal("Page")); ?></span>
</div>
<?php
$rsTitle->moveNext();
}
$rsTitle->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>
</div>
.indexrow{
background-color: #94C8F2;
width: 100%;
}
.indexrow:nth-child(even){
background: #f2f2f2;
}
.indexrow a:hover{
background-color: #FFFF00;
}
I think your mistake is putting the nth-child() on the parent? nth-child needs to go on the children you are listing out because nth-child(odd) is saying "every instance of this element that is an odd child. I think you have fallen for the common misconception that nth-child(odd) means: "any odd child of this element"

Pagination not displaying (its shows dimensions 659.08 x 0)

I have created a Wordpress theme, where I have created a single.php for my blog posts. I had pagination, and everything was working fine before. Now It all of a sudden the pagination is not displayed on the page. When I 'inspect element' I can see that the code is there, but nothing is displayed. It says that the dimensions of the div is 659.08 x 0. I've searched the internet and It feels like I've tried everything. Do you have any suggestions as to what the problem can be? Here is a snippet of my code. Thanks in advance!
<div class="container-fluid" id="content_container">
<div class="row">
<div class="col-12 col-md-8 col-lg-8">
<div class="inner">
<p>By <?php the_author();?> | <?php the_date(); ?></p>
<?php the_content();
?>
<div class="post-pag-wrap">
<div class="post-pag-container prev">
<?php previous_post_link('
<h6>%link</h6>
', 'previous', false);
?>
</div>
<div class="post-pag-container next">
<?php next_post_link('
<h6>%link</h6>
', 'next', false);
?>
</div>
</div>
</div>
You don't write which element has the dimensions 659.08 x 0, but this sounds very much like all its child elements are floated and the parent therefore doesn't have any height (because it doesn't wrap floated elements by default).
To avoid this, add overflow: hidden or overflow: auto to that (parent) element. This should cause the element to wrap the floated children and make them visible that way.

How to style a LI after every 4th LI displayed in a 2 column/1 row view for each?

So I have a blog layout (theme) that displays the articles in 2 columns on a row, each article being a LI inside an UL.
I then have this CSS code that basically adds margin-top: 20px; to each LI starting from the third (so it doesn't add a margin to the first row and leave an empty space between them and the header) and it also adds clear: both; to each 2 LIs (first LI of each row).
.module-row.two-cols ul li:nth-child(n+3) {
margin-top: 20px;
}
.module-row.two-cols ul li:nth-child(2n+1) {
clear: both;
}
The code for this is:
<div class="content-wrap module-row two-cols clearfix">
<ul>
<?php while (have_posts()): the_post(); ?>
<li class="col-sm-6">
<div class="item content-out co-type1">
<?php get_template('article-column');?>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
My problem starts with the CSS when I try to insert an ad LI after every 4th LI - so it will basically display an ad after every 2 rows/4 columns. Is there a way to change the CSS so I can insert that ad correctly and also keep the current CSS logic (with the top margin and clear)? Also, the ad LI will be with one with the class col-sm-12 (so full width).
So I want this, with CSS if possible
Basically insert via the PHP code another LI with class col-sm-12 after each fourth col-sm-6 LI. Thanks!
I can do this in PHP, change the theme's logic and do the count there, not via CSS, but I want to know if possible to do it via CSS because I would like best to not change the theme, only CSS. "Hacking" it and doing it via PHP instead of CSS will look like this - so this is the logic I want in CSS:
Add a margin-top to all the LIs after the 3rd LI, add a clear: both from each 2 to 2 LIs starting from the first LI and add both margin-top and clear: both to each 5th LI.
Here's a possible solution.
The idea is that with help of modulo operation, you can target the third while loop, 6th, 9th and so far. I am not a php developer so I hope I hope there is no syntax mistake in here if so would appreciate if someone points me to it! :)
EDIT: made a quick fix
EDIT: The HTML structure is not correct, but I do not know what you want to achieve with the li and divs at the end result so I left it the way you wrote it in the question.
<div class="content-wrap module-row two-cols clearfix">
<ul>
<?php $counter = 0 ?>
<?php while (have_posts()): the_post(); ?>
<?php if ($counter % 3 == 0){
<div class="col">
// code for your ad here
</div>
<?php } else {?>
<li class="col-sm-6">
<div class="item content-out co-type1">
<?php get_template( 'row' );?>
</div>
</li>
<?php } ?>
<?php $counter = $counter + 1 ?>
<?php endwhile; ?>
</ul>
</div>

wordpress image blog post thumbnail height stretch display issue

I have an issue in my wordpress blog post thumbnail image. The height was stretch, I do the css height: auto; but still won't behave as expected.
.post-image img {
height: auto;
}
<?php if(has_post_thumbnail()) { //check for feature image ?>
<div class="post-image">
<?php the_post_thumbnail(); ?>
</div><!---end post image-->
<?php } ?>
Use <?php the_post_thumbnail(array(200x200)); ?>
add height & width using array to apply to image. Still not resolved then css comes from any parent structure.

simple float issue on wordpress blog

I am modifying a wordpress theme completely, and have run into one very simple problem. Please look at my page here: wordpress blog When you scroll down, you can see the one blank area under the first post. For some reason, that block isn't floating left. Each post has the following css that fits in a 645px container:
.home-post-wrap { width: 285px; margin:0; float: left; background-color: #FFF; padding: 15px; overflow: hidden; border-bottom:1px dotted #C5C5C5; border-right:1px dotted #C5C5C5; }
Any idea on how to make the page flow correctly here?
crimson_penguin is correct. It's because the columns are different heights. Every 2 columns you wan't to do a clear. The easiest thing to do here would look at the index of the loop and echo a clearfix after every 2. You can do this with modulo, and/or apply a class to the ones at 1, 3, 5, etc... to clear:left.
Here is a PHP function of mine that I use to clear.
<?php
public static function cycle($count, $odd = 'odd', $even = 'even') {
return ($count % 2) ? $even : $odd;
}
?>
Basically, you pass it three arguments (the second and third are optional) where the first is the $count, or the object to look at (for example $i in a for loop) and $odd / $even are strings to be used when an odd or even item in the loop is encountered.
Here it is in action:
<?php foreach ($products as $key => $product): ?>
<li class="<?= Template::cycle($key) ?>">
<img src="<?= $product->get_photo('small') ?>" />
<div class="productMeta">
<h3><?= $product->get_full_name() ?></h3>
<p><?= $product->get_description() ?></p>
</div>
</li>
<?php endforeach; ?>
I'm doing the cycle on the $key which in this case happens to be 0, 1,... n. The result is the following:
<li class="odd">
<img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/465.jpg" />
...
</li>
<li class="even">
<img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/935.jpg" />
...
</li>
<li class="odd">
<img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/350.jpg" />
...
</li>
Simply apply some clear:left to the odd ones, and you'll be all set!
It is floating to the left, the problem is that the first block is taller than the second, making it stick out below, and so the third block is still on the same "line" as the first two, like you would expect it to if the first block was twice as high.
What you probably want, is a <div style="clear: left;"></div> between every 2 blocks... but that might be hard to do in WordPress. Another potential solution would be min-height on them, but that wouldn't be quite as nice (and wouldn't work in IE6).

Resources