Clever Geek Handbook

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!

+3


source to share


6 answers


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;
}
+3


source


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


source


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

+1


source


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.

0


source


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


source


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.

0


source






More articles:


All Articles