thumbnail not responsive – astra free, elementor free

re. preview: no fix at the moment I’m afraid

re. responsiveness; try adding below custom CSS.

.lidget .lyte {
padding-bottom: 66% !important;
height: auto !important;
}

Thanks so much for speedy reply. Where do I insert the css? I don’t think elementor free has the option. Can I do via FTP? Apologies if this is outside the scope of the forum but I’m a newbie

you can use “appearance -> customize -> extra css” ??

Thanks. didn’t know I could add CSS there! Unfortunately, it doesn’t seem to have had any effect though.

I just pasted the above code in:

.lidget .lyte {
padding-bottom: 66% !important;
height: auto !important;
}

I’m unfamiliar with CSS syntax so do I need to add anything else?
Thanks again

darn, the styles get overwritten by LYTE’s styles .. :-/

can you try adding the video using the lyte shortcode instead of as a widget maybe?

[lyte id='9GgjvtOoJ-o' /]

I tried the shortcode but for some reason, it just displays the link on the page instead of fetching the video:

httpv://www.youtube.com/watch?v=’9GgjvtOoJ-o’

Could this be a conflict issue? I tried disabling w3TC and auto optimize but no effect.

it’s because the pagebuilder content is not filterable by LYTE at the moment, so we’ll have to go back to the widget and then try this code snippet;

add_filter( 'lyte_css', 'change_lyte_css' );
function change_lyte_css( $lyte_css ) {
  $old_lidget_css = '.lidget .lyte, .widget .lyMe {padding-bottom:0!important;height:100%!important;}';
  $new_lidget_css = '.lidget .lyte, .widget .lyMe {padding-bottom: 66% !important; height: auto !important;}'
  $lyte_css = str_replace( $old_lidget_css, $new_lidget_css, $lyte_css );
  return $lyte_css;
}

The easiest & safest solution to add that is using the code snippets plugin.