Okay
  Public Ticket #1330251
Text Resizing in Dynamic Layer
Open

Comments

  • cormip started the conversation

    I'm not sure I'm approaching this correctly but what I'me trying to accomplish is to have a Dynamic Layer displaying [title] and [excerpt] such that they flow with each other. The [title] may wrap to additional lines, but I always want the excerpt to appear JUST below the title, regardless of whether the title wraps to 1 line or 3. I found I could accomplish this by using this as the Dynamic Layer's content:

    <div>
       <h1>[title]</h1>
       <p>[excerpt]</p>
    </div>

    Though this "flows" correctly, I lose the font resizing that typically occurs when the parent viewport and container gets resized. You can observe this at the provided URL. Scroll down and look for the pink "grid" with the title "Perspectives" and the word "NEWS".

    Are there perhaps some LayerSlider classes I can add to the content elements that would solve this?

  •  180
    Attila replied

    Hello cormip,

    Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today.

    I would like to confirm that we have received your message. Due to the nature of the issue you are experiencing, I will have to consult with my colleagues first. I will get back to you as soon as I can.

    We appreciate your patience while we're working towards your ticket.

    Best Regards,
    Attila | Kreatura Support Team

  •  180
    Attila replied

    Hello again,

    To make the texts responsive I'd recommend to set them up as two separate layers, that you position under each other. And then set the dynamic 'option' to title / excerpt.

    Unfortunately the slider cannot always handle responsively text that is embedded into a complex HTML structure. This is why we recommend the above setup.

    Best Regards,
    Attila | Kreatura Support Team

  • cormip replied

    Though this makes the text responsive, it doesn't allow the excerpt to flow with the title above it, resulting in either a big gap between title and excerpt to accommodate titles that might wrap to more than 1 line or having the text overlap when the title wraps to more than 1 line.

  •  180
    Attila replied

    Unfortunately when a text is broken into two lines, the other separate layer positioned under it will not follow up on this change. However if you write the text as one line, it shouldn't break into two. Could you please show us what exactly would you like to adjust in the slider ?

    Best Regards,
    Attila | Kreatura Support Team

  • cormip replied

    A picture will help describe what I'm looking to accomplish, which shouldn't be all that uncommon. I want the [title] to be in a header tag, and the [excerpt] in regular body text, and have them flow together. I also want the font size to scale as the container size changes based on the viewport dimensions. See attached images.

    Attached files:  dynamic-layerslider-flow.png
      dynamic-layerslider.png
      dynamic-layerslider-works.png

  •  180
    Attila replied

    Thank you. My colleagues and I will look into this to see if we can find anything, and get back to you shortly.

    Best Regards,
    Attila | Kreatura Support Team

  •  180
    Attila replied

    If you use the following HTML code, it should be working: 

    <span style="font-size: 2em;">[title]</span><br>
    <span style="font-size: 0.8em;">[excerpt]</span>

    The important thing is NOT to use div, h1, etc elements. But instead, only use spans, and set the initial text size in "em" unit.

    Best Regards,
    Attila | Kreatura Support Team

  • cormip replied

    That did not work. Title and excerpt overlap. See attached.

    Attached files:  ls-fix-attempt-1.png

  •  180
    Attila replied

    Thank you for the feedback. We will check on this and get back to you shortly.

    Best Regards,
    Attila | Kreatura Support Team

  •  180
    Attila replied

    Unfortunately we cannot troubleshoot this problem from screenshots. Please provide us with the URL or setup an access, where we can see and investigate this slider.

    We have tested the code, and it worked on our end, so we will need to see why isn't it working on your site.

    Best Regards,
    Attila | Kreatura Support Team

  •  180
    Attila replied

    The problem is that you've created 3 separate layers from the code I've provided.

    This code should be inserted into one HTML layer type, as it is, without modifying:

    <span style="font-size: 2em;">[title]</span><br>
    <span style="font-size: 0.8em;">[excerpt]</span>

    Please try to implement it that way. And in case you still experience problems with it, please set up a temporary WP admin for us so we can make this adjustment.

    Best Regards,
    Attila | Kreatura Support Team

  • cormip replied

    Ummm, firstly, I think you meant to say "Dynamic" layer type, not "HTML Layer Type". and secondly, I do have the snippet of code saved in a single layer. See screenshot.

    Attached files:  LayerSlider-screen-1.png

  •   cormip replied privately
  •  180
    Attila replied

    Thank you for the credentials. We will login, check on this, make some adjustments and let you know of the results.

    Best Regards,
    Attila | Kreatura Support Team

  •  180
    Attila replied

    The code we've provided had to be put into a single DIV. Please check how we've modified the slider.

    The dynamic layer type handles the HTML code differently, that is why a single DIV container was needed instead.

    Best Regards,
    Attila | Kreatura Support Team

  • cormip replied

    Awesome! That was exactly what I was looking for.

  • cormip replied

    For anyone else looking for the solution:

    <div><span style="font-size: 2em;">[title]</span><br>
    <span style="font-size: 0.8em;">[excerpt]</span></div>