Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #1043158

    Hi guys

    There are six different CMS pages in my case.
    I have the “avia-caption” in place on all of the sites and styled it like this:

    .avia-caption {
        border-radius: 0px;
        width: 44%;
        left: 28%;
        right: 28%;
        bottom: 50px;
        text-align: center;
        background: rgba(255,255,255,0.9);

    Is there any chance to make the width value different depending on the page and assign a unique ID for this section per page? Like this I would be able to adjust the width of this block depending if the word or words in it are long or short.

    Thanks in advance


    Avia-Caption means it is just text … centered text with a background color … isn’t it?
    So as a text inline element you can just “let it find” its own width. No need to set a width-attribute.

    Edit: Regarding IDs for content elements/sections … you can simply activate a theme option for it: Enfold > Layout Builder > “Show element options for developers”

    • This reply was modified 1 year ago by  cg.

    Correct, centered text with a background color and behind that a full width background image.
    Could you maybe provide an example of what you mean by “let it find” and how it would work if I have e.g. “About” and “Our services” so it adjusts dynamically depending on the word length?

    The “Show element options for developers” option is already active, but you can’t use just for “avia-caption” as far as I know.


    There is already a specific ID on every page you can address with custom CSS.
    For example: HTML > Body > class > “page-id-2”

    But i’m not sure if i completly understand your goal … can you show your current status? … and maybe a quick illustration of what you want to achieve?

    As far as i understand, i did a little example of how i would solve that.

    Result: =>

    – a ‘Color Section’ for the background with a unique ID -> “hero”
    – a simple ‘Text Block’ inside of it … or “Special Heading’, depending on the page structure / semantic
    – some Custom CSS in Quick CSS or preferably in the style.css of a child theme

    #hero .avia_textblock  p {
      display: table;
      background: rgba(255,255,255,0.8);
      color: #222222;
      font-size: 48px;
      font-weight: 700;
      text-transform: uppercase;
      margin: auto;
      padding: 30px 30px 20px 30px;
    • This reply was modified 1 year ago by  cg.

    Hi Michael,

    i’ll close that staging site with a password protection.

    Reply, if you can not replicate the described solution and need to see it in an online version again.


    Hi cg

    Sure no problem and thanks a lot for your additional info/tips.
    I will check them today to see if it works like I think it should.

    Best regards


    Hm no – does not do what I want unfortunately.
    The text is currently always left aligned in front of the background image, but I would like it to have centered and as I said, with an individual width depending on its content inside respectively the slider element.

    So without setting a width value it is quite tiny but if I change that, it will be like this for all the pages no matter if I define a unique ID for the color section or not.
    Do you understand what I mean?


    Figured it out, was easier than I thought.

    So I added a custom CSS class to the “Easy Slider” element and then addressed it via CSS like this:

    .kontakt-slider .avia-caption {
    width: 22%;
    left: 39%;
    right: 39%;

    Did this for all pages individually and this allows me to have individual width values for each element – just awesome!
    Thanks a lot for your input cg!


    Here the text is centered … with a background color (+ transparency) … and it adjusts its size depending on its text content:


    That’s the soluction i posted before. Reopened the staging domain.
    Isn’t it, what you wanted to achieve?

    I think it would be a lot more reliable to not set an absolute width. Because when you change the text or its size or the size of the browser window (on mobile) it won’t fit. And every time someone wants to add a page or change a page title you would have to adjust the css with an absolute setting in the css.


    Isn’t it, what you wanted to achieve?

    Yes, but for some reason your solution did not work for me. Probably due to the reason I had to address the slider element directly and not the text section itself.

    I think it would be a lot more reliable to not set an absolute width. Because when you change the text or its size or the size of the browser window (on mobile) it won’t fit

    Correct, but I have implemented a different solution for smaller devices so the text will not be inside the image. Instead it will be below the background image due to a lack of space on a smartphone portrait view for example. So it’s all set.


    Ok … so be it … :-)
    I have to admit, i don’t like that unflexible way of solving it.
    But if it works for you, all good.

    As a test i adapted my previous example to an ‘Easy Slider’-element … only to check if or why it may not work … with some modifications to the css this is my result:



    Looks good on a desktop viewport.
    However, if I resize the browser window with your sample to check the responsive behaviour, the text completely disappears.

    That’s what I meant :)


    @victoria_d Please close this thread.


    you didn’t mention mobile view initially … i wanted to help … not to do your entire work … :-)

    but, here you go … nicely solved on mobile too:



    It was not my intention to let you do my entire work, not at all.

    I only mentioned it since you wrote about it ;) See here:

    Because when you change the text or its size or the size of the browser window (on mobile) it won’t fit



    Please close this thread.

    Thanks a lot



    Best regards,

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

The topic ‘Individual width for caption field’ is closed to new replies.