Home Forums Weaver Xtreme Theme image resizing on browser shrinking

This topic contains 6 replies, has 3 voices, and was last updated by  scrambler 10 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #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/


    Many thanks




    If I understand you, and what the link does, what that effect really requires is dynamic changing of the font size. That can only be done by JavaScript. I’ve seen some plugins that do that in the past, but I don’t have any suggestions about which might work.



    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?



    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 work



    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.




    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 difference



    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


Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.