How can these elements be aligned?
I have this link:
link
At the bottom, you will find some products that are not aligned on your own.
I put the image more clearly to understand how they want to be aligned
http://i59.tinypic.com/1zfh0dc.jpg
CODE PHP:
<div class="container">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 6,
);
$products = new WP_Query( $args );
if( $products->have_posts() ) {
while( $products->have_posts() ) {
$products->the_post();
?>
<?php
$check = get_field('featured_product');
if($check[0] == 'Check'){ ?>
<div class="featured_product">
<?php the_post_thumbnail('featured'); ?>
<div class="featured_content center">
<h3><?php the_title() ?></h3>
<div class='content'>
<?php the_excerpt() ?>
</div>
<a href="?page_id=26" class="get_quote">get quote</a>
</div>
</div>
<?php } ?>
<?php
}
}
else {
echo 'No products!';
}
?>
</div>
</div>
CODE CSS:
.featured_product{
width:28%;
float:left;
max-width:300px;
min-width:300px;
margin-right:6%;
border:3px solid #d3d1d1;
margin-bottom:30px;
border-radius:0 0 20px 20px;
padding-bottom:30px;
height:468px;
}
I tried to make these changes but still won't align as I should.
.featured_content{
padding:0 30px;
position: absolute;
bottom: 0;
}
.featured_product{position:relative;}
No matter how much content is added, it should be aligned anyway. As you can see, products that do not have an image or long text are displayed incorrectly.
Can you help me find a solution to this problem?
Thanks in advance!
You can use an absolute position and set box-sizing
from .featured_content
to border-box
so that it displays correctly. Try the following:
.featured_product {
position: relative;
}
.featured_content {
display: block;
width: 100%;
box-sizing: border-box;
padding:0 30px;
position: absolute;
bottom: 30px;
left: 0;
}
EDIT
If you want to make the title and content in the same alignment and the quote button in the same alignment, you need to wrap the image with div
and add static height to that div. Also wrap the button get_quote
and set the wrapper to an absolute position. Example:
Html
<div class="featured_product">
<div class="image">
<img>
</div>
<div class="featured_content">
<h3></h3>
<p class="content"></p>
</div>
<div class="get_quote_wrap">
<a class="get_quote"></a>
</div>
</div>
CSS
.featured_product {
position: relative;
}
.featured_product .image {
height: 200px;
margin-bottom: 20px;
}
.featured_product .get_quote_wrap {
display: block;
width: 100%;
box-sizing: border-box;
position: absolute;
bottom: 30px;
left: 0;
text-align: center;
}
If you are looking for an easy answer you can go with an img div where either you can put the image or you can give a minimum height. In your example I added this and it was ok
<div style="min-height:200px;"></div>
Give the class .featured_content
a margin-top value if not preceded by an img tag
.featured_content{margin-top:220px}
img.attachment-featured ~ div.featured_content{margin-top:0;}
http://www.w3schools.com/cssref/css_selectors.asp
All you need is the .content
div must have a minimum height, so it Get Quote
must be vertically aligned accordingly.
Apply this style rule:
.content {min-height: 165px;}
Adjust the height accordingly.
You can use it in parent class to get everything centered
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
Add to
position: relative;
text-align: center;
in your
.featured_product{}
and
position: absolute;
bottom: /* your offset */;
in
.featured_content{}
position relative cannot float, just place a div around it and make it float to the left.