Sydney Sydney - 17 days ago 5
CSS Question

CSS - mobile responsive issue with absolute positioning

I faced some problem with responsive design when using absolute positioning. I have a container-div which contains an image and an inner-div. Through absolute position, i placed the inner-div in front of the image.

<div class="outer-div" style="position: relative">

<img src="image.jpg" />

<div class="inner-div" style="position: absolute; top: 10px;">
<p> text here </p>
</div>

</div>


The problem is that when I view this page on mobile, the inner-div and the text scale down proportionately. This is not the intended effect. On smaller screen, I want the font-size to remain the same (meaning it will cover more of the screen).

Oddly, on Chrome, if I resize the browser, there is no problem. But if I click on the mobile view under developer tool (Ctrl+Shift+C on windows), it will be scaled down.

Anyone knows how I can circumvent this issue?

Answer

Add this meta tag to your document head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Comments