a very simple quick and dirty method would be to have a non transparent background ;)

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 1;
}

Did you use a different lightbox plugin ? That would be nice to know

or – you replace the text what is shown on hover – for example to show the alt attribut text.
If the image doesn’t have one – there will be nothing to see – if you have set an alt attribut this will show instead.

this to functions.php of your child theme

function image_alt_not_title(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.lightbox-added img').each(function(){
            var lin = $(this).attr('alt');
            $(this).attr('title',lin);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'image_alt_not_title');

well look here – the grid row is nice to have for nested elements.
but it also bothered me that the element always has full width

https://kriesi.at/support/topic/grid-row-not-fullsize-how-to/

so this is your url on youtube: https://www.youtube.com/watch?v=QQaGgPVLM88

the first option to set must have a Questionmark ?rel=0 every following option gets an ampersand &

the ecver=2 is to have not on pause the related videos too ! so try to add following options
if you don’t like the autoplay – get rid of it

https://www.youtube.com/watch?v=QQaGgPVLM88?autoplay=1&ecver=2&showinfo=0&loop=1&rel=0

https://www.youtube.com/watch?v=QQaGgPVLM88?autoplay=1&ecver=2&showinfo=0&loop=1&rel=0

the video alb does not accept those links

–
but an image with that manually added link does the trick – you only have to add the
&iframe=true

https://www.youtube.com/watch?v=QQaGgPVLM88?autoplay=1&ecver=2&showinfo=0&loop=1&rel=0&iframe=true

by the way – boardsoft changes ever ampersand & to a different sign – so it does not work here on click

but see and click the image on the left:
https://webers-testseite.de/videos-on-lightbox/

for your special interest and following: https://kriesi.at/support/topic/how-to-play-youtube-video-full-width-on-going-issue-mobile-and-responsive/#post-937554

to your questions from:
https://kriesi.at/support/topic/logo-not-sharp-enough-on-my-website/#post-940054

Enfold does not have that element –
this is a masonry with perfect grid and show Titel and Excerpt on hovering: https://webers-testseite.de/categories/

tomorrow will be more time.
but please do the adjustments first – its not perfect now https://kriesi.at/support/topic/logo-not-sharp-enough-on-my-website/#post-940043

see above the total code – maybe your a bit mixed up .

on resposive case ( smaller screens than 768px) the header height is set from enfold to 80px not your given (88px) so the values must be adjusted.

by the way your background image is not set to cover the place. so there are sometimes white borders

by the way there is a possibility to not shrink to the half but f.e to 60%

it is a bit bigger to have some quality.

pull the browser window a bit smaller till the burger menu appears.
That is the behavior !

these are the quick css entries:

#header_main {
    border-bottom: none;
    box-shadow: 0 8px 5px -5px #999;
}
.responsive .logo {
    display: block;
}
.logo, .logo a {
    overflow: visible;
}
.logo img {
    height: 160% !important;
	max-height: 130px !important;
}

@media only screen and (max-width: 767px) {
.responsive #top .logo { display: block }
} 

if you have placed the code and image we will see how to adjust for your settings – do i have a link?

There is only one thing missing – an if clause – if comments are allowed .
Because if not there will be an empty container but with dimensions

well i do not know if there is a shorter cleaner code for a or b but alway c
try this please:

add_filter('avf_template_builder_content', 'avf_template_builder_content_comment_mod', 10, 1);
function avf_template_builder_content_comment_mod($content = "")
{
  if(is_singular('post') && comments_open() || is_singular('portfolio') && comments_open() ) {
    $comment = do_shortcode("[av_one_full first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='30px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='#efefef' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' custom_class='custom-class'][av_comments_list av-mini-hide='aviaTBav-mini-hide' custom_class=''][/av_one_full]");
    $content = $content . $comment ;
  }
  return $content;
}

this comes as always in the functions.php of your child theme – you only have to look for the shorcode you like to have in the postings.
Create your comment alb element with the surroundings you like to have – with all screen options and so on – aktivate the debug mode and notice the shortcode generated. this comes to the do_shortcode input field.
From that time on you have always under the content your comments field – if comment are open.

but the commentfunction has to be activated:

add_filter('avf_template_builder_content', 'avf_template_builder_content_social_mod', 10, 1);
function avf_template_builder_content_social_mod($content = "")
{
  if(is_singular('post') || is_singular('portfolio')) {
    ob_start();
    avia_social_share_links(array(), "," , false);
    $social = ob_get_clean();
    $comment = do_shortcode("[av_comments_list av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='']");
    $content = $content . $social . $comment ;
  }
  return $content;
}

if you only want the comments under the content: ( i will look to embed this in some divs that it will look better )

add_filter('avf_template_builder_content', 'avf_template_builder_content_comment_mod', 10, 1);
function avf_template_builder_content_comment_mod($content = "")
{
  if(is_singular('post') || is_singular('portfolio')) {
    $comment = do_shortcode("[av_comments_list av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='']");
    $content = $content . $comment ;
  }
  return $content;
}

PS : you have to look what shortcode fits to your gusto- ( screen options)
this is for hide on small and mini with custom class:

[av_comments_list av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' custom_class='custom-class']

or more styled with a 1/1 full container you can take this as shortcode etc. pp

[av_one_full first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='30px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='#efefef' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' custom_class='custom-class'][av_comments_list av-mini-hide='aviaTBav-mini-hide' custom_class=''][/av_one_full]

by the way avf_header_setting_filter can be used to give one page a unique header style:

Nice things f.e. for a portfolio page to have that design

add_filter('avf_header_setting_filter','av_change_header_style');
function av_change_header_style($header){
    if( is_front_page() ){
        $header['header_position'] = "header_right header_sidebar";
    }
    return $header; 
}

Try this instead:

add_filter('avf_header_setting_filter','avf_header_setting_filter_mod');
function avf_header_setting_filter_mod($header)
{
    if( is_home( )  ){
        $header['header_replacement_logo'] = "http://adamwolfpt.pcscloudsolutions.com/wp-content/uploads/adam-wolf-pt-logo-color-transparent.png";
    }
    return $header; 
}

by the way if you have a post as landing page it must be is_frontpage

and the function name is free in use – sometimes a bit more meaningfull is better

add_filter('avf_header_setting_filter','replace_transparent_logo_on_homepage_only');
function replace_transparent_logo_on_homepage_only($header)
{
    if( is_home( ) ){
        $header['header_replacement_logo'] = "http://adamwolfpt.pcscloudsolutions.com/wp-content/uploads/adam-wolf-pt-logo-color-transparent.png";
    }
    return $header; 
}

• This reply was modified 7 years, 2 months ago by Guenni007.

if you need further assitance – feel free to e-mail me

so here is the code to have a bit more bigger lightbox:

.mfp-container {
	text-align: inherit;
	position: absolute;
	width: 90vw;
	height: 50vw;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 50px;
}

.mfp-iframe-holder .mfp-content {
    max-width: 100%;
    width: 100%
}

div.avia-popup .mfp-close {
    right: 5px;
    top: 5px !important;
    background: #900;
    border: 2px solid #ffee00;
}