I am utilizing Bootstrap features on my website to assist with my CSS. However, I have encountered a peculiar issue upon the initial page load where some elements are positioned incorrectly, but a simple page reload fixes it. Any suggestions on how to resolve this?
See below for reference images.
HTML:
<div class="media post-react">
<%= link_to post do %>
<div class="media-left hidden-sm hidden-xs">
<%= image_tag("#{post.thumbnail_link}", :width => 320, :height => 180, class: "news-object") %>
</div>
<div class="media-body">
<div id="media-heading">
<h2 class="media-title align-left"><%= post.title %></h2>
<p class="blog-index-date align-right"><span class="hidden-sm">Last updated: </span><%= post.updated_at.strftime('%b %d, %Y') %></p>
</div>
<div style="clear: both;"></div>
<p class="basic"><%= post.summary %></p>
<p> </p>
<p class="hype"><b>Read More</b></p>
<p class="post-cat blog-index-date"><%= post.blog_category.name if post.blog_category_id.present? %></p>
</div>
<% end %>
</div>
CSS:
.media {
padding: 10px;
background-color: #404040;
border-left: 4px solid #00BFFF;
border-radius: 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.media-title { margin-top: 0px }
.media-body { position: relative }
.post-react {
opacity: 0.8;
transition: .45s, transform .45s ease;
-moz-transition: .45s, transform .45s ease;
-webkit-transition: .45s, transform .45s ease;
}
.post-react:hover {
opacity: 1.0;
-ms-transform: scale(1.01); /* IE 9 */
-webkit-transform: scale(1.01); /* Safari */
transform: scale(1.01);
}
.blog-index-date {
padding-right: 5px;
color: #999999;
}
.post-cat {
position: absolute;
bottom: 0px;
right: 5px;
}
.news-object { border-radius: 2px }
First Load: https://i.sstatic.net/rNgjh.png
After Refresh: https://i.sstatic.net/kFAD0.png
This issue has persisted for a few weeks now. Appreciate any assistance you can provide!