Currently having some CSS problems as I resize images based on the user's browser window size. Unfortunately, this causes my text to overlap with the image. One solution is setting a fixed height in pixels for the container, but it looks off when resizing the browser.
You can take a look at a simplified version of the issue here
<div id="coverContainer" style="position:relative; height:auto; width:100%;" class="center-block">
<img class="photo center-block" src="https://www.google.co.uk/images/srpr/logo11w.png" />
</div>
<div class="center-block">
<h2 style=" color:black;">
Welcome to my website
</h2>
<div id="news">
<h2 style="color:black;">News</h2>
<p style="color:black;">Example Text Example Text Example Text Example Text Example Text Example Text Example Text Example Text Example Text .</p>
</div>
</div>
css
.photo {
box-shadow: 3px 3px 3px black;
position:absolute;
max-width: 100%;
height: auto;
}
I aim to always have the text positioned below the image.
Any assistance on this matter would be highly appreciated.
Thank you