How to get an image to be responsive to text

Hello,

I am trying to get an image to be responsive to the size of my text box. Since screen sizes change so much, I want to be able to set it to change with the text box. Even going from the editor to the demo page the sizes of the text boxes are much different and make my image not fit. I have tried a bunch of different things but nothing seems to be working. I would really appreciate some help! I would also appreciate if you could help me make the image and the text box touch. Image below.

Hi there,

What you are aiming for is does not really fit to the responsive functionality of the site because the dimension of the image will depend on the size of its container and as the screen dimension changes, the image’s height and width depends on the size of it’s parent container, in this case, the column and not other element’s height and width.

However, that is possible to do by some writing some custom Javascript that will keep track of the height of the text box and set the same height to the image and its width to auto.

As this is a custom code, we would not be able to provide the actual Javascript code as this goes beyond the scope of our support but we can provide some resources on how you could implement this:

https://www.w3schools.com/Jquery/default.asp
https://api.jquery.com/resize/
http://api.jquery.com/height/
https://www.w3schools.com/jquery/jquery_css.asp

Hope this helps you get started.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.