How do i make a text block within on top of an image responsive?

Question

I'm coding my personal website using inline CSS (the CMS doesn't support CSS that isn't inline) and I'm struggling with making my design be responsive on mobile.

It looks great on the iPad and on desktop, but it looks terrible on mobile making as it exceeds the width of the website itself.

Here is how it looks like on desktop

Here is the code that I am currently using:

<div style="position:relative;font-family:Lato;" >

<img src="https://images.unsplash.com/photo-1589503099580-00dc088a0081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="Nature" style="width: 100%">

<div class="text-block" style="position:absolute;top:150px;right:90px;left:650px;background-color:white;color:black;padding-top:10px;padding-bottom:20px;padding-left:20px;padding-right:20px;width:100%;" >

<h2><div style="font-size: 45px; line-height: 76px;"><font color="#f56b00"><b>Lorem Ipsum</b></font></div></h2>

<div style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>

I would like it to be mobile responsive by having the text box on the bottom or within the image. I've tried adding width:100%; after the padding and within the div style of the header but it still doesn't work.

Thank you very much.

Answer 1

Here is suggestion how to achieve that.

 <div style="position: relative; font-family: Lato;"> <img src="https://images.unsplash.com/photo-1589503099580-00dc088a0081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="Nature" style="width: 100%; height: 60%" /> <div class="text-block" style=" position: absolute; background-color: white; color: black; padding: 10px 20px 20px 20px; width: 45%; top: 40%; left:60%; transform: translate(-50%, -50%); "> <h2> <div style="font-size: 45px; line-height: 76px;"> <font color="#f56b00"><b>Lorem Ipsum</b></font> </div> </h2> <div style="font-size: 16px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div>