I am encountering an issue with the caption I added to my slider. When I scale the page, the height becomes inconsistent. It seems like the caption is not in an absolute position on the page. Strangely, when I try to position it absolutely, it disappears?
Here is the code snippet:
<div style="height: 500px;">
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li><img src="img/businessbig.jpg" alt="">
<p class="caption">Welcome to Ashley Tate
<br />
Thank you for visiting our website – whether you are considering buying or selling your business, we are here to assist you.
<br />
Experience is key in business sales, and the core team at Ashley Tate has over thirty years of experience in business sales and acquisitions.
<br />
Our approach to business sales is unique; we aim to provide professional advice and guidance based on a deep understanding of the sales process and the market. </p>
</li>
<!--<li><img src="img/cateringbig.jpg" alt=""></li>
<li><img src="img/nurseriesbig.jpg" alt=""></li>-->
</ul>
</div>
</div>
Here is the CSS code:
.caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
background: #000;
background: rgba(255,255,255, .8);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
margin: 0;
margin-top: -400px;
float: left;
}
When the media queries are applied, the caption appears fine on smaller screens but ends up being pushed under the image on larger screens.