2

I have responsive 'cells' in my WP website created by the posts.

HTML 

<article>

    <div id="post-<?php the_ID(); ?>" <?php post_class( 'row'); ?> >

        <div class="col-md-12">
            <div class="text-cell">
                <h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                <h3><?php the_category(' '); ?></h3>
            </div>
        </div>

    </div>
    <!-- /#post -->

</article>

CSS

article {
    position: relative;
    margin: 0;
    padding: 18% 0;
}

.text-cell {
    position: absolute;
    height: 100%;
    width: 30%;
    top: 0;
    left: 0;
    background-color: #fff;
}

I don't want the 'article' to have a set height if possible (I used padding to create a dynamic height for 'article')

I want 'text-cell' to be full height of the article and 30% of the width. Until its mobile then it'll be full width and 30% of the height. The 100% height doesn't seem to work.

visual ex. enter image description here

Sushil
  • 2,837
  • 4
  • 21
  • 29
user3550879
  • 3,389
  • 6
  • 33
  • 62

1 Answers1

1

Try adding bottom to your positioning scheme:

.text-cell {
  position: absolute;
  /* height: 100%; <-- remove this */
  width: 30%;
  bottom: 0; /* <-- add this */
  top:0;
  left:0;
  background-color: #fff;
}

If that doesn't work than there is an issue with the height of the .col-md-12 DIV or the article DIV.

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • i've added bottom and it doesn't work, '.col-md-12' is a bootstrap function that only makes columns (doesn't deal with heights) and thats the only style for article. The text inside 'text-cell' is vertically centred, but the background doesn't show up at all (indicting issue with height) – user3550879 May 11 '15 at 17:45