PS : i don’t like the new outlook of Layerslider 7 – the old slider was much more intuitive to set.

Edit : 10 days ago your last posting – i remove now the example page ( due to copyright )

nearly one month ago : hm – I think actually very detailed – speak noob safe solutions to offer; obviously, however, some fellow here on board are lazy to read. Probably only ways in summary mode are accepted, which present a solution if possible without learning curve.

the https://simonehirsch.de/wp-content/uploads/slider-3.jpg is even not a real portrait photo.
And it is to small – you have it on 300dpi – but if you go and set the the dpi to 72 without recalculating the photo it only got 768px width:

Nevertheless – you could use for the smaller screens that image and the fullwidth image slider – and you can stretch it – but go to the alb and open the tab: Styling and choose under : “Slideshow Image and Video Size” no scaling.

If you use a portrait it will show the way you like:

f.e. here with two fullwidth easy sliders: The image detail is not good now due to lack of source material, but it is sufficient for demonstration purposes.
https://enfold.webers-webdesign.de/simone-hirsch/

When you have seen the example page i remove that page again.

i think this comes from using gtranslate :
i only read about multiple widgets in conjuction with gtranslate.

PS: bitte dringend um DSGVO kümmern. Da wird alles zu Google gefunkt bevor irgendetwas abgefragt und zugestimmt wird.
Click the link

PPS: ist das die Enfold Suchfunktion, die du einblendest? Weil normalerweise bei Enfold die img’s nicht mit in Suchergebnisse mit aufgenommen werden.

Where did you get a social media widget. Or do you mean the social buttons alb element?

if you choose on content tab of the image alb the caption – another Option Toggle will be shown on Styling Tab: “Image Caption”.
Font and weight had to be styled via css. Selector is:

.av-image-caption-overlay-center {
  font-weight: bold;
}

background on hovering is styled by:

.av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
  opacity: 0 !important;
}

and if you like to change the font on hovering:

.av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-image-caption-overlay-center {
  color: #FFF !important
}

can you use instead:

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img, *[title]');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

Sorry – I’m a participant like you – so there’s no private content area for me to see either.
( if it is the page that is part of your src in the first post – i can not see any widget )

with all this – to style web pages it is useful to learn how to use the developer tools of the browsers. In Chrome, Firefox, Opera these are available by default. With Safari you have to activate the Developer Tools in the Settings – Advanced Settings at the bottom. Then you have the possibility to point to elements via the context menu of the mouse and to inspect them. Mostly a window is shown like this one above. On the left side there is the html structure and mostly on the right side the css settings related to the shown element.

So you go with the mouse over your portfolio widget and open the context menu (usually the right mouse button). There you will see something like examine or inspect. The window above will show up.

i only can reproduce that a background-video overflows the parent container – if i do force to do so on three different container to set the overflow to visible. But this is something i do not believe that you have done.

if you inspect the svg ( on mac i do take sublime text for it – on pc i can open it with Notepad ++) there are set inline styles ( similar to html – you can do that with xml too )
Illustrator f.e. will do that too but always name the classes : st0, st1, st2 etc – and all settings for the groups will go to that inline style as classes.
i did for the icon : mir0; miretta : mir1 and interiors : mir2
with these classes you can now set new colors via fill option in your quick css.

why do i like to rename the classes. If you have more than one inline svg on your page – and all have this nomenclature – the last inline svg in the DOM will overwrite the classes with its properties.

PPS: if you checked all that – i will return on my testpage to my own logo again.

ok now the font – do you have from the letters an info. …
The Miretta Letters i do not find but we have a good png file of it to vectorize – see your footer.
the Interiors Letter fits well with Mrs Eaves Font.

see now the Logo: https://enfold.webers-webdesign.de/wp-content/uploads/Miretta-Logo.svg

We had one thing to do before you put in as logo file.
Enfold adds this preserveAspectRatio attribute to the logo, because that’s what few people know about svg creation. However, they set it so that x and y value shrink to the left center. But we don’t want to overwrite our statement inside the svg. Therefore Günter set a filter to avoid this overwriting. This comes as a snippet in the child theme functions.php
( if you like to shrink the logo to the left – then you don’t need that snippet – the position of the icon in the middle of the logo will be untouched of that )

function custom_svg_images_get_html( $svg, $attachment_id, $url, $preserve_aspect_ratio, aviaSVGImages $obj_svg_img, $svg_original ){
  $return_default_svg = false;
  if($return_default_svg){
    return $svg;
  }
  return $svg_original;
}
add_filter( 'avf_svg_images_get_html', 'custom_svg_images_get_html', 10, 6 );

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

/*** only if you like to see that the logo is shrinking inside its container to the middle ***/
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

I have now rebuilt this in a quick procedure (very unprecise: Link ). Of course, it is better to have the original layout template. And the font would be good to know, then you can save the part of rebuilding already times. It is only meant as a demo.
Look again at the svg in the DOM.

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}
#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}
#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

and you see each group got his own class – so your can colorize it you like by fill option – and to see the preserveaAspectRatio Effect you had to hamper width shrinking of logo and logo container

#header #miretta .mir0 {
  fill: green
}
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

see example page: https://enfold.webers-webdesign.de/

by the way – your css code :

@media only screen and (min-width: 1210px) {
  .home_post_layout2 article:nth-child(2n) {
    padding-top: 100px;
  }

  .slide-entry-wrap:not(:nth-child(1)) {
    margin-top: -100px;
  }
}

is the reason why on bigger screens this happens:

does the logo exist in a vector format. svg is one but illustrator etc. too.
We need this.
You don’t need to update – it is pure layout and a bit css.
PS: what is the name of the font
( click the image to enlarge )

if you inspect my logo on that page you see that the xml based notation of a svg graphic is nearby a html programming.
it could have parts like style infos and tags. see 1, 2, 3 i have that “bildmarke” in a group tag and the “letters” in different ones. I can address them with css. so my Groups got ID’s. You see on the inspection – that i set the fill-opacity of that “bildmarke” directly to zero.

This is the look of it all seen without fill-opacity zero inside the svg:

Now i can use the enfold class header-scrolled to switch the visibility.
Css code here is:

.header-scrolled #bildmarke {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

.header-scrolled #name_1,
.header-scrolled #sub_heading {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #bildmarke,
#header:not(.header-scrolled) #name_1,
#header:not(.header-scrolled) #sub_heading {
  transition: 1s all ease;
}

i would realize it by creating the logo as svg.
Shouldn’t be too difficult with fonts and a figurative mark.
Depending on where you want your image mark to appear after scrolling, I would then place it on the left or in the center directly inside the svg, and set the fill-opacity of this group to zero.
Then you can even change the fill-opacity animated with the class header-scrolled.

By the way – what font is it – i found similar fonts – but not exactly the same.
see here : https://enfold.webers-webdesign.de/

are you familiar with inspecting the DOM? Look what is your portfoliobox-ID

use this to get influence on image source as a snippet in your child-theme functions.php:

function my_avf_newsbox_image_size( $image_size, array $args, array $instance ){
  if( $args['widget_id'] == ( 'portfoliobox-3' || 'newsbox-2' || 'newsbox-4' ) ){
    $image_size = 'full';
  }
  return $image_size;
}
add_filter( 'avf_newsbox_image_size', 'my_avf_newsbox_image_size', 10, 3 );

______________
just for INFO:
change full to what you like to have ( small, medium, large etc. pp.) you can find the names of the enfold image-sizes on functions.php lines 211ff:

$avia_config['imgSize']['widget'] 		= array('width'=>36,  'height'=>36);			// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		= array('width'=>180, 'height'=>180);		       // small image for blogs
$avia_config['imgSize']['featured'] 		= array('width'=>1500, 'height'=>430 );			// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 );			// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		= array('width'=>495, 'height'=>400 );			// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 );			// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 = array('width'=>845, 'height'=>684 );			// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 	= array('width'=>710, 'height'=>375 );			// images for magazines
$avia_config['imgSize']['masonry'] 	= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321);		        // big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar'] = array('width'=>1210, 'height'=>423 );		// images for fullsize pages and fullsize slider