July 13, 2017 at 15:50 UTC - Views: 30 #50105
Is there any way to resize a picture when there is text alongside it to maintain the same length as the text as the browser shrinks?
If you look here you can see what I am trying to achieve: http://techfestconf.com/hr/aus-stage/blog-test/
LambertJuly 13, 2017 at 16:06 UTC - Views: 28 #50106
I am not sure what you are trying to do.
Are you saying you want the text box to have a fixed size, and the image to scale in whatever space is left for it?July 13, 2017 at 18:44 UTC - Views: 23 #50117
What needs to happen is either for the image to fill the area on the left when minimising, or shrink the text in the right dynamically so that it does not exceed the height of the picture. Whichever one will workJuly 13, 2017 at 19:09 UTC - Views: 21 #50118
You realize there is a fondamental issue here.
As the browser gets smaller, if the font stays the same size, the text will take more lines. To make the text take less lines, you would need to make the text box larger, which would make the image smaller and therefore the text will be also end up taller than the picture.
So the only way you could maintain height of text and height of image would be to scale the fonts, which can be done using viewport units, but you may end up with unreadable text.
Read the article below on how to scale text with the browser, and give it a try.July 14, 2017 at 13:51 UTC - Views: 10 #50122
Making the font smaller won’t work for my client unfortunately.
I have added a class to the div. Is there any way to change the padding according to the screen width? I have tried .is-smalltablet, but it doesn’t seem to make any differenceJuly 14, 2017 at 17:18 UTC - Views: 7 #50125
I am not sure what padding you are referring to.
Forget about the responsive behavior for a moment. Is there a specific layout you see working for you on smaller screen. If there is describe it in detail.
What I was explaining before is that if you take your fixed amount of text and font size. And if you try to fit that beside the image on a small screen, I believe you will not find any way to size them so that the text and the image will have the same height.
If you do, explain, and I will work on making the rule for a responsive transition
You must be logged in to reply to this topic.