I have been trying to get sections of text to remain over their rectangular backgrounds when I make the browser larger and smaller. One of my text frames and rectangles does it perfectly, but I cannot work out why in order to apply it to the other text boxes. In the bottom right hand corner of the frames that move in sync there is a little black 'T' icon in front of a picture icon. I presume this is the setting that I need to apply but cannot work out how to!
The top image shows my issue within the browser (I would like all the boxes within the grid to be equally aligned when squeezed together in the browser).
The bottom shows how I would like it to be displayed and the black text and image icon at the bottom of the three text boxes that do it correctly.
I'm sure it is something very simple I just can't seem to get my head around it!!!
The text box, which is working correctly in your opinion, is working wrong in fact! Why?
You cose a system font fpr your text. This font has to be converted to an image during output, because you can’t be sure, that the machines of the visitors of your site have this font installed.
Since this textbox is converted to an image, it behaves like an image and scales proportionally. The other textboxes grow vertically to keep the text visible, when you scale down the browser window. They are behaving correctly! At the same time, the pictures scale down proportionally, what causes the strange look.
In other words: You have an issue, which isn’t to resolve technically, Text boxes grow, images shrink – as long as they behave responsively. There are different ways to minimise this problem by layout techniques, but it is impossible to avoid it completely – as long as you don’t place your text as an image (preferably SVG vector format). But in this case you run into another difficuly: The text size shrinks, when the browser window is reduced.
This is one of the unavoidable problems of responsive layouts, which are orientated horizontally. If you have a vertically orientated layout (for example: text under or above images) layout will be much more easy.