I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location.
Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices!
https://i.sstatic.net/OtO6O.jpg
The "ticket" element appears to be hidden behind the cards (not sure why), and I want it to be positioned above the images for easier editing.
Here's the relevant code:
CSS
// Here are all the styles related to the view controller.
// These styles will automatically be included in application.css.
// Sass (SCSS) can be used here: http://sass-lang.com/
.box{
position: absolute;
top: calc(50% - 125px);
top: -webkit-calc(50% - 125px);
left: calc(50% - 300px);
left: -webkit-calc(50% - 300px);
}
/* Additional CSS styles omitted for brevity */
.ticket:after{
content: '';
/* More box-shadow declarations omitted for brevity */
}
/* Additional CSS styles omitted for brevity */
.slip{
left: 455px;
}
.nameslip{
top: 60px;
left: 410px;
}
.flightslip{
left: 410px;
}
.seatslip{
left: 540px;
}
/* More CSS classes and styles omitted for brevity */
HTML
<% title("Home Page") %>
<h1><i class="fa fa-home"></i> Home Page <small>views/pages/home.html.erb</small></h1>
<div class="section" style="background-image: url('https://c2.staticflickr.com/2/1334/1484360775_8391c2ce1a_b.jpg')">
<div class="container" style="color: white">
<div class="box">
<ul class="left">
<li></li>
<li></li>
<li></li>
<!-- Additional list items omitted for brevity -->
</ul>
<ul class="right">
<li></li>
<li></li>
<li></li>
<!-- Additional list items omitted for brevity -->
</ul>
<div class="ticket">
<!-- Ticket content and sub-content omitted for brevity -->
</div>
<div class="barcode"></div>
<div class="barcode slip"></div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Content of card elements omitted for brevity -->
</div>