-
Posts
-
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
Michael`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”
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: => https://enfold.tabulor.de/sample-page
– 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; }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
MichaelHm 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?Solved
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:
=> https://enfold.tabulor.de/sample-page
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
- The topic ‘Individual width for caption field’ is closed to new replies.