'unexpected bootstrap theme quirks
I bought a bootstrap template a while back from a guy who's site is now gone. On one of the pages, there are 9 tiles (masonry), each of which I am using for different sub parts. As a sanity guard, I numbered all the tiles so I could tell them apart both in the code and on the screen. This works fine until I get to the 9th and last tile, where the number 9 looks like a lower case letter g. At first that's what I thought it was, but then I did a comparison test. Sure enough, there is a small but subtle difference between the lowercase letter g and the number 9, specifically, a little serif poking above the back of the letter g.
But now that that's solved, it also means the 9's sit lower than the 8 and 0 sits between them in
height. Here's a screenshot:
What can I do at this late date to get sensible looking numbers?
I was also surprised to see that once named and ordered, the tiles do not stay in that order. If I can target them correctly with my variables, maybe I can live with that, but just in case I'd like to know how to stop that, too. Thanks.
<div class="main col-md-12">
<!-- page-title start -->
<!-- ================ -->
<h1 class="page-title">Blog Masonry No Sidebar</h1>
<div class="separator-2"></div>
<!-- page-title end -->
<!-- masonry grid start -->
<!-- ================ -->
<div class="masonry-grid row">
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered">
<div id="carousel-blog-post" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators bottom margin-clear">
<li data-target="#carousel-blog-post" data-slide-to="0" class="active"></li>
<li data-target="#carousel-blog-post" data-slide-to="1"></li>
<li data-target="#carousel-blog-post" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="overlay-container">
<img src="images/blog-1.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="item">
<div class="overlay-container">
<img src="images/blog-3.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="item">
<div class="overlay-container">
<img src="images/blog-4.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</div>
<header>
<h2><a href="blog-post.html">Blogpost with slider</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">12</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered">
<div class="overlay-container">
<img src="images/blog-2.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2><a href="blog-post.html">Cute Robot</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">10</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<header>
<h2><a href="blog-post.html">Text Post</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">09</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="audio-wrapper">
<iframe height="166" class="margin-clear" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/106329682&color=ff5500&auto_play=false&hide_related=false&show_artwork=true&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
<header>
<h2><a href="blog-post.html">Audio post</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">08</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/v1uyQZNg2vE"></iframe>
</div>
<header>
<h2><a href="blog-post.html">Blogpost with embedded youtube video</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">07</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="overlay-container">
<img src="images/blog-3.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2><a href="blog-post.html">Nunc interdum mi neque</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">07</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="overlay-container">
<img src="images/blog-4.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2><a href="blog-post.html">Distinctio magni aut illum</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">06</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio magni aut illum animi laboriosam esse quidem sit illo fugit est culpa facilis amet, ab doloremque magnam, sapiente architecto natus. Voluptatem esse optio explicabo dolore impedit debitis deleniti porro doloribus provident perferendis nostrum quasi nobis magni atque mollitia, quas, quos corporis!</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<header>
<h2><a href="blog-post.html">Voluptatem esse optio explicabo dolore impedit</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">06</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio magni aut illum animi laboriosam esse quidem sit illo fugit est culpa facilis amet, ab doloremque magnam, sapiente architecto natus. Voluptatem esse optio explicabo dolore impedit debitis deleniti porro doloribus provident perferendis nostrum quasi nobis magni atque mollitia, quas, quos corporis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam, perspiciatis libero quasi, iusto delectus sed accusantium fugit inventore iure molestiae amet voluptatem, ut dolorem ex dolorum ea impedit quae!</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="overlay-container">
<img src="images/blog-1.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2><a href="blog-post.html">Successful business ideas</a></h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">06</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by <a href="#">John Doe</a></span>
<span class="comments"><i class="icon-chat"></i> <a href="#">22 comments</a></span>
</div>
</header>
<div class="blogpost-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam, perspiciatis libero quasi, iusto delectus sed accusantium fugit inventore iure molestiae amet voluptatem, ut dolorem ex dolorum ea impedit quae!</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a></div>
<div class="link pull-right"><i class="icon-link"></i><a href="#">Read More</a></div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
</div>
<!-- masonry grid end -->
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|