Having some trouble creating a unique WordPress theme with Bootstrap3.
I can't seem to get my divs to behave properly and I've tried everything from display: inline, vertical-align: top, floats, clears, etc... but nothing seems to work.
Here is how it currently looks, and I need everything to be in line:
https://i.sstatic.net/JUuVk.png
Here is the code snippet:
<div class="container content">
<!-- CONTENT -->
<div class="col-md-12 blog-posts">
<article class="single-article col-md-4">
<a href="myweb.com/blog/tempus-non-auctor/">
<img width="300" height="300" src="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg" class="img-responsive wp-post-image" alt="team4" srcset="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg 300w, myweb.com/wp-content/uploads/2016/07/team4-150x150.jpg 150w, myweb.com/wp-content/uploads/2016/07/team4.jpg 573w" sizes="(max-width: 300px) 100vw, 300px"> </a>
<h1 class="article-headline"><a href="myweb.com/blog/tempus-non-auctor/">tempus non, auctor</a></h1>
<h4 class="article-time-stamp"><i>Posted on July 15th, 2016</i></h4>
<p></p><p>Etiam sit amet orci eget eros faucibus tincidunt. In hac habitasse platea dictumst. Aenean commodo ligula eget dolor. Vivamus in erat ut urna cursus vestibulum. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce fermentum. Etiam feugiat lorem non metus. Suspendisse feugiat. Praesent congue erat at massa.<br><a class="moretag hvr-pop" href="myweb.com/blog/tempus-non-auctor/"><i>Read more</i></a></p>
<p></p> </article>
</div> <!-- end blog posts part -->
<!--END content wrapper -->
</div>
Here's the CSS snippet:
.single-article {
padding-bottom: 10%;
em {
font-style: italic;
}
}
.article-headline {
padding-bottom: 2%;
a {
color: $purple-color;
}
}
.article-time-stamp {
font-size: 1em;
padding-bottom: 1%;
}
Any suggestions? Thank you!