Text over image not showing in mobile browser - html

Question

so I placed some links (text) over an image and in desktop browsers everything is working just fine, however, once you open it in a mobile browser, the text is not showing up. Here's my css:
#header {
width: 100%;
position: relative;
}
#dm {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#logo {
position: absolute;
top: 5%;
left: 18.8%;
width: 13.5%;
height: 64.8%;
background-color: transparent;
border: none;
}
h2 {
position: absolute;
top: 59%;
left: 21.7%;
width: 78%;
}
h2>a {
color: #f6f6f6;
font-size: 1.3vw;
font-variant: small-caps;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
text-decoration: none;
text-shadow: #000000 10% 10% 20%;
margin-right: 1%;
}
And HTML code:
<div id="header">
<img src="header.png" border="0" id="dm">
<a id="logo" href="index.html"></a>
<h2>Domů O nás Web & Grafický design Digitální kresba Pro firmy Ostatní služby Portfolio Faq Kontakt</h2>
</div>
Does anyone know how to solve this issue?

Answer 1

The font size you have set for the links is font-size: 1.3vw;, which means they will appear at 1.3% of the viewport width.
For desktop browsers with screen width of at least 1000px, it will show up as at least 13px which is totally fine.
For a mobile browser, if your device screen is 640px wide, it will only appear as ~8px which is way too small, which is probably why you couldn't see it. Besides, most mobile devices have width of between 320px and 400+px if viewed at portrait mode, so that makes the text even smaller.
When I put it at the fiddle, I thought there was no text until I placed a grey placeholder image. You should have used em instead of vw for the font size if you want to scale it.