I have an unordered list with 3 list items within it. Each list item contains an image and 3 lines of text. I'm trying to keep the word "SOLD" in the top-right corner of an image. This image is within the < li > item, along with other divs, and the code for the < li > item looks like this:
<li>
<div class="houseImage"> <img src="http://media-cdn.tripadvisor.com/media/photo-o/01/ca/eb/48/clenahoo-house.jpg"/></div>
<p class="sold">SOLD</p>
<div class="titlebox">Demo Title</div>
<div class="locationbox">Demo</div>
<div class="pricebox">DemoDemo</div>
<div class="boxlink"><a class="divLink" href="http://www.google.com"></a></div>
</li>
You can see I reference the class "sold". It currently works somewhat and can be seen
here.[
^]
The style code for the sold class is:
.sold{
position:absolute;
top: 3%;
left: 55%;
color:red;
font-size: 6vh;
font-weight:bold;
text-transform: uppercase;
overflow: hidden;
}
Right now this is producing inconsistent results across different viewport sizes and browsers (chrome/internet explorer). I'm wondering if there's a way to make this responsive and STAY in the top-right corner
of the image no matter the browser or screen size?
I understand media queries might need to be used for being responsive, but for browser differences?? Perhaps there's a cleaner CSS method?
Thank you all!