UPDATE

I may have figured out a solution, to change the colour of the highlighted text, rather than the highlight itself.

.av-marked-text .av-rotator-text-single{
	color:#204242 !important;
}

I’d prefer to change the colour of the highlight, but this is a solution to the issue anyway.

Regards
John

Awesome! Thanks Jordan.

Out of interest, is there a media query I could use to change the heading size between 1360px wide and 990px wide? There’s a long title which messes up between those sizes.

Hi Victoria,

Thanks, maybe I will reach out again when we’ve begun the build proper.
At this stage, I’m not even sure if this is the final design of the site, I just don’t like putting things forward which aren’t possible (in Enfold at least!)

I’ll change the page back to draft and comment that css out for the time being.

Best
John

That’s a shame, but thanks anyway Basilis. Maybe I can achieve something through padding.

Thanks for getting back to me. Enfold has changed a bit since I last built a site using it, I think I found what I need in the Advanced settings.

Hi Ismael.

Thanks for getting back to me.

I created a clone of the page and started adding tags and noticed that they are automatically capitalised in the top left corner text preview, but not in the “For Developers: Section ID” inside the colour section. Previously they were being auto-capitalised in the “For Developers: Section ID” and therefore not working.

Maybe a random bug…

Thanks Victoria!

I do have a question, have you seen this issue with anchor links before? i.e. it automatically capitalises them in colour sections?
I was wondering if it was just me, as it might be the server that the client’s site is hosted on. We usually host our own sites.

Hi – I have found a solution to this problem, I have posted another thread here https://kriesi.at/support/topic/adding-id-to-advanced-layer-slider/#post-873675

Hi?

Hi Jordan,

Thanks for that. It worked for the caption, but not the heading. After doing a bit of playing around I think I found the right resource.

.responsive #top .slideshow_caption h2

So the code is now

@media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption h2 {font-size:28px!important;}
.avia-caption-content p { font-size:26px;line-height:25px!important}
}

I have sooooo much CSS in there now!

Hi Jordan,

Sorry no, I’m self taught via the Enfold forums, so I might know what they are without knowing!

Is it this kind of thing?

@media only screen and (max-width: 1060px) {#top .avia-slideshow-button { font-weight: 900 !important; font-size: 14px; padding: 15px 15px 13px; }}

I tried something like this, but couldn’t identify the correct resource to attribute it to.

No it doesn’t! It did for a minute, then stopped!

Thanks Victoria.

That works, but I’d prefer the burger menu. The 6px padding look too tightly spaced.
If that’s the only thing that works, that’s fine, but I use this on another Enfold site

@media screen and (max-width: 1060px) {
#advanced_menu_toggle { display: block !important; }
nav.main_menu { display: none !important; }
}

But on the newer version of Enfold, it seems to hide the navigation completely below 1060px.

Thanks Victoria, as I said in my previous message, I had found a solution on the forums using this code.

.sidebar {
    background: #f8f8f8;
}
@media only screen and (min-width: 768px) {
    .container_wrap.sidebar_right{
        background:-webkit-gradient(linear,right top,left top,color-stop(#f8f8f8,0.295),color-stop(white,0));
        background:-webkit-linear-gradient(right, #f8f8f8 29.5%, white 0%);
        background:   -moz-linear-gradient(right, #f8f8f8 29.5%, white 0%);
        background:     -o-linear-gradient(right, #f8f8f8 29.5%, white 0%);
        background:        linear-gradient(right, #f8f8f8 29.5%, white 0%);
    }
}

But it isn’t running full page height. I’ve commented it out now, but you can see the problem with the image. I was wondering if there was a way of making the changes run full page height.

It’s a shame, because it looks awesome at the top of the page!