Hi I know what it is, because the top menu point is white there is space and faint vertical lines where this menu would be seen. For phones and tablets can this be turned off as it doesn’t look good. Unfortunately this website needs the top header so I can’t remove it. If you have any suggestions that would be great.

Cheers Kinnear

oh my goodness… Sometimes, the devil is a squirrel :D

Thank for this hint. Now, everything works fine! Wonderful.

Topic can be closed as solved, (if you do so in this board. ^^)

I would like the video to stop playing once the user advances to the next slide. If you do let the entire video play, then the slide changes, the video then starts over and plays audio in the background when no one can see it. I only want the video to play when that slide is visible.

That worked so you can see the “X”….but I still think that maybe the background overlay should be darker and the max image size should be a little smaller. The “X” is right up there against the top of the browser, which can make it less noticeable. A slighter darker overlay would help to make it stand out a little better as well.

It does help to also add the z-index setting to the background overlay. Here are the changes I made in order to make it so that the lightbox image stands out a little better:

.mfp-wrap, .mfp-zoom-in.mfp-ready.mfp-bg  {z-index: 99999;}

.mfp-zoom-in.mfp-ready.mfp-bg {opacity:0.85!important;}

div.avia-popup .mfp-close {border:2px solid #808080!important; right:30px!important;}

img.mfp-img {max-width:90%!important;}

On a slightly related note….any idea why the hover overlay for the thumbnail only shows as a thin bar across the top of the image the first time you hover over it after the page loads? It will show if you hover over it again. You can test this on that page by hitting refresh.

Hi Rikard

Having some trouble adding the custom css.
so as an example i added .testimonial in an icon box’s custom css field.

Then in my enfold child css i added

#top testimonial .avia-button .avia-size-large {
    border-radius: 22px !important;
    font-size: 13px;
    min-width: 139px;
    padding: 15px 30px 13px;
}

as i want the button to have rounded corners.

but there is no effect in the frontend, what am i doing wrong here, just one example of yours would help.

Thank you for your time

• This reply was modified 9 years, 10 months ago by waveshaper.

Hello Basilis,

I dont need someone to work on it for customization.. I believe it is somewhat like on this topic.. https://kriesi.at/support/topic/tab-title-click-event-handlers/.. can you help me pinpoint where is the tab function event handlers like it was directed on that topic..

Thanks,

Carlo

I did try the fix mentioned in the bottom of this thread https://kriesi.at/support/topic/fullwidth-easy-slider-on-mobile-2/. But now my image is distorted, even after I cleared my cache and browser history. Maybe I didn’t enter the CSS right?

Here’s what I have CSS:

@media only screen and (max-width: 768px) {
.avia-slideshow-inner, .avia-slideshow-inner img {
    height: 300px !important;
}}

@media only screen and (max-width: 768px) {
.av_slideshow_full li img {
    width: 150% !important;
    max-width: 150% !important;
    margin-left: -25%;
}}

Thanks!

Andy,
Thanks. SO the div#text-6 and -5 appear to ffect position of widget on mobile or media screens.
I got that position worked out.
The desktop and tablet (screens wider than 767px, the widgets are both overlapping each other again.
I have played with the following code:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

#text-6 {
transform: translate(100%);
}

which I though was for positioning of widgets on desktop-type display, but there are not moving.
Here is a screenshot:

That did not work for a desktop.
However when I tried the following:
I removed this bit of code from above:
.page-id-734 #main {
padding-top: 200px !important;
}
On the Header Size I kept the custom size
On Header Behavior I have all the Sticky Header options unchecked but do have the Let logo and menu position adapt to browser window box checked.

It works perfect on a desktop and tablet but on a mobile, the mobile menu disappears on sub pages and the menu background is large.
Here is what the homepage and a sub-page look like on a desktop with the changes above.
Here is what I see:
HomePage – Desktop

SubPage – Desktop

HomePage – Mobile (Android)

SubPage – Mobile

I’ll leave this code in place for now till you can check as this is the closest to getting everything correct that has been achieved so far.
Thanks.

Hi Rikard,
This worked great! Thank you. I would like to know if one more thing is possible for this area. Not that the sub-pages have a background image that shows up in the top area. Is this possible for the homepage also?

Thanks again.

Keith