The snippet from Ismael’s link placed in your child-theme functions.php ensures that only the child theme is loaded exclusively.
if you only have changes in the php – it is not necessary to have css and js child-theme files.
If you edit them too – you can change the loading in the child-theme php file . f.e. in video.php at lines 43ff:

function extra_assets()
{
	//load css
	wp_enqueue_style( 'avia-module-video', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/video/video.css', array( 'avia-layout' ), false );

	wp_enqueue_script( 'avia-module-slideshow-video', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/slideshow/slideshow-video.js', array( 'avia-shortcodes' ), false, true );
	wp_enqueue_script( 'avia-module-video', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/video/video.js', array( 'avia-shortcodes' ), false, true );
}

f.e. by replacing the load css file via:

//load css
wp_enqueue_style( 'avia-module-video', get_stylesheet_directory_uri().'/shortcodes/menu.css', array( 'avia-layout' ), false );

and then you will upload that edited css file to the shortcodes folder aswell.

By the way – concerning to the youtube plugin ( all other topics concerning to this are closed)

Now see here two example pages:
https://webers-testseite.de/goodwave/
https://webers-testseite.de/goodwave2/

the first is with the height setting of css code above and parallax background-images – ( you see a lot of parallax means bad performant page )
( a little trick avoids a white stripe under each hmiparallax section – the background-color of it is equal to the following section ! )

the second example page is with background-image set to scroll ( yes it is scroll ) and with a pseudo-container before that has inherits the same background-image – and that pseudo-container get position fixed !!
That is because background-attachment : fixed has problems not only on mobile advices but also on Safari Browsers on desktop.
to have more of the images on small screens – i set those sections to:

@media only screen and (max-width:767px) {
  .avia-section.hmiparallax .container {
    height: 100vw !important;
  }
}

is there a link to an example page?

this is pure css code – so the place to be inserted is your quick css field in enfold options – general styling.

you’re welcome. You even went the way of your own image format. It’s great that it worked out that way.

I have only looked through the contents of the folders in Enfold 4.9. There you can see the files. Since the older versions only have 3 files, it was obvious to browse through them to see if there were any differences.

hm – the min-height is calculated in icongrid.js – but it has never run into conflict on my enfold pages.
and if you look at the rendering of the page, the correct height seems to be calculated at first, but then it is converted to the wrong output.

are you familiar with the enfold debug mode?
Then please post the whole enfold shortcode of that page here – and i will import it on a test environment of mine.
Then i can better inspect – if that error is reproducable.

Next – one big different is that we have now on
enfold/config-templatebuilder/avia-shortcodes/icongrid/
4 files with one icongrid_old.css and one icongrid.css – and the difference is immense between those files.
there must be the reason for your troubles.

PS: i’m participant as you – so i do not see private Content area that you posted – including logins etc.

i do not understand the 3rd image.
if you like to add a new portfolio ( yes – even this is a custom post type ) you go and create a new portfolio.
Why don’t you create new post with new “hunde” ?
in this list there must be the new cpt’s – aren’t there?

or is image3 made this way? ( you erased the whole permalink )

why don’t you layout it you want on ( image3 ) and save the whole page as template.

you then can create a new “hunde” page – click on template and then on “hunde-Template” to insert the whole layout.

Big Advantage is that you can save these templates via Enfold (Child) – Import/Export : “Export Layout Builder Templates”

But you edit the po files ( not mo ) – after editing the po file with e.g. poedit this creates the po and mo files. Both files had to be uploaded.

btw: you can have your own child-theme lang folder and to have this active you can use in your child-theme functions.php:

function overwrite_language_file_child_theme() {
    $lang = get_stylesheet_directory().'/lang';
    return $lang;
}
add_filter('ava_theme_textdomain_path', 'overwrite_language_file_child_theme');

see : docu

on fontello you can upload svg files ( they have to meet a few conditions there, but then you can also make an iconfont out of any monochrome svg).
you can upload to fontello svg’s by drag&drop into that custom icons field.

after adding all your wanted svg files – mark them on fontello and give a name to the new icon-font.
Upload that icon-font to enfold ( import/export – Icon font manager )

after that – go and read on the docu how to get for an existing icon a different one.

more easy than using some quick css code ?
just uploading an image file for your icon to replace.
The one thing you had to know is that enfolds nomenklatur for those social links is always:
av-social-link-xyz
the xyz is the name of the social media and that will be at your list point as class – e.g: av-social-link-twitter; av-social-link-facebook; av-social-link-linkedin … etc.
The way over a new icon-font is more complex – but has some advantages.
If you got a svg file you can upload that to fontello to create an own icon-font.

next tip – if you know the right selector for those headings you can be very specific on changing those font-sizes by setting media query for it.

f.e.:

@media only screen and (min-width:768px) {
  h1.av-special-heading-tag {
    font-size: clamp(24px, 3.5vw, 50px);
  }
}

@media only screen and (max-width:767px) {
  h1.av-special-heading-tag {
    font-size: clamp(22px, 6vw, 50px);
  }
}

with a decision to make it via flexible font-size definition etc. pp

you can replace these enfold predefined icons by quick css
Then you can even use multicolor images
f.e. a different telegram icon: see docu
scroll to: “In case of using an image”

#top #wrap_all .av-social-link-telegram a:before{
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: url(/wp-content/uploads/custom-telegram.png) no-repeat center center;
    background-size: contain;
}

#top #wrap_all .av-social-link-telegram:hover a {
  /*** if needed ***/
}