We are trying to put text with a solid colour background on the image and have it responsive. see attachment " screen shot 2021-03-09 at 11.17.28AM.png" for an example of the text over image.
look at image "scree-2" that shows the text with blue background. text will not align to bottom of the image.
here is the code I'm using.
<div style="background-color:#10104B;margin-bottom:100px;padding:30px;width:300px;position:relative;"> <p style="color:white;font-size:18px;">LIVE IN THE HEART OF DOWNTOWN HALIFAX</p> <p style="color:white;font-size:14px;">We are passionate about helping people find a place they can ‘call home.’ <br/> BARA Management Group is a property management and development company located in Downtown Halifax, the heart of Atlantic Canada’s big city.</p> <p style="color:white;font-size:14px;">We operate multiple residential apartment buildings with properties located in the vibrant downtown core.</p> </div>
I suggest you to remove the html and inline CSS. Instead of that, you should set a background for the html / text layer in the styles tab / background and add some padding to the layer. Please check this video for example: https://www.loom.com/share/c23bff62224b4477abb48fbce9e3948e
We are trying to put text with a solid colour background on the image and have it responsive. see attachment " screen shot 2021-03-09 at 11.17.28AM.png" for an example of the text over image.
look at image "scree-2" that shows the text with blue background. text will not align to bottom of the image.
here is the code I'm using.
<div style="background-color:#10104B;margin-bottom:100px;padding:30px;width:300px;position:relative;">
<p style="color:white;font-size:18px;">LIVE IN THE HEART OF DOWNTOWN HALIFAX</p>
<p style="color:white;font-size:14px;">We are passionate about helping people find a place they can ‘call home.’
<br/> BARA Management Group is a property management and development company located in Downtown Halifax, the heart of Atlantic Canada’s big city.</p>
<p style="color:white;font-size:14px;">We operate multiple residential apartment buildings with properties located in the vibrant downtown core.</p>
</div>
Hello Joe,
Thank you for getting in touch with us!
I suggest you to remove the html and inline CSS. Instead of that, you should set a background for the html / text layer in the styles tab / background and add some padding to the layer. Please check this video for example: https://www.loom.com/share/c23bff62224b4477abb48fbce9e3948e
Best Regards,
Andrea | Kreatura Support Team