Home Forums Weaver Xtreme Theme image resizing on browser shrinking

This topic contains 6 replies, has 3 voices, and was last updated by  scrambler 1 week, 2 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #50105

    lambert
    Participant

    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

    Lambert

    #50106

    Weaver
    Keymaster

    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.

    #50114

    scrambler
    Moderator

    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?

    #50117

    lambert
    Participant

    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

    #50118

    scrambler
    Moderator

    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.

    https://guide.weavertheme.com/responsive-sizing-two-little-known-css-properties/

    #50122

    lambert
    Participant

    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

    #50125

    scrambler
    Moderator

    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.