hier ein paar mehr css Setzung als du wahrscheinlich benötigst – lösche einfach was du nicht benötigst:

#top .avia_message_box {
  /* text-align: left !important; */
  padding-top: 30px;
  hyphens: auto;
}

#top .avia_message_box p {
  text-transform: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em
}

#top .avia_message_box .avia_message_box_icon svg {
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  top: 5px;
}

Oh, sorry. Since I work with a German user interface, I didn’t think about this progress bar (Fortschrittsbalken). The “Reading Progress Bar” isn’t translated in my German version, but the progress bar element is. That’s why it didn’t occur to me.

Yes background-color is better set on that options dialog of the Element. But you had to open the second popup for each item (bar) there is the background-color option.
__________

And just to mention – you can have gradients on that too by css
f.e. for the first bar in your element:

#top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .bar {
  background-image: linear-gradient(90deg, rgba(255, 255, 0, 1) 0%, rgba(0, 188, 212, 1) 50%, rgba(238, 130, 238, 1) 100%);
  background-size: contain;
  animation-iteration-count: 1;
}

see https://webers-testseite.de/#marketshare

you have set this css rule to not have the full-width of the grid element.

#av-grid-custom-home {
  max-width: 960px;
  margin: 0 auto;
}

the quick and dirty way is to set the background-color to your #f3f3f3 – but it influences the whole installation.

#top #main {
  background-color: #f3f3f3;
}

__________________

so remove your setting from above …

A more flexible approach is to wrap the grid-row element in a div that has all the properties of a standard color-section.

set a custom class on those grid-row element : grid-notfull
now to get a not fullsize grid-row element i have the following snippet in my child-theme functions.php :

function grid_layout_notfull(){
$responsive_size = avia_get_option('responsive_size');
?>
<script>
(function($){
  $('.av-layout-grid-container.grid-notfull' ).each(function() {
    var notfullID = $(this).attr('id');
    $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
    $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
  });
  $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
  $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

by the way there is one obsolete curly bracket in your snippet!

try instead:
(if you do not need it on checkout page etc. – adjust the conditionals)

function widget_area_above_footer_woocommerce() {
    // Check if we are on a WooCommerce page.
    if ( class_exists( 'WooCommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
        // If it's a WooCommerce page, display the widget area.
        dynamic_sidebar( 'footer-widget' );
    }
}
add_action( 'ava_before_footer', 'widget_area_above_footer_woocommerce' );

ok – if you like to have on default a sidebar header – and on homepage only the header top position.
( for that scenario we need than a bit different css too if you like to have slide-out from left to right)

1 set your enfold child to header top and make all your decisions you like to have for that header ( height, logo left or right, navigation position, shrink or not, etc pp )

2 Go to your homepage editor and make your decision there – f.e. if it should have transparency etc.

3 Look now to your homepage with dev tools of your browser. Note your ID of that page and look what classes are set on #header
e.g.: ( all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled )

4 now switch back to your header left position.

put this to your child-theme functions.php:

(remove options you do not need – or replace – f.e. header_size and header_custom_size and replace by header_size: ‘slim’ / or large )
you can find those corresponding header settings in : avia_header.php

function av_change_header_style($header){
  if(is_page(array( 17, 123456))){ 
    $header['header_position']    = "header_top";
    $header['header_layout']      = 'logo_right main_nav_header menu_left';
    $header['header_size']        = 'custom';
    $header['header_custom_size'] =  140;
    $header['header_shrinking']   = 'header_shrinking';
    $header['header_sticky']      = 'header_sticky';
    $header['header_unstick_top']   = 'header_unstick_top';
    $header['header_stretch']     = 'header_stretch';
    $header['header_transparency']  = 'header_transparency header_glassy';

    $header['header_class'] = " all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled";
  }
  return $header; 
}
add_filter('avf_header_setting_filter','av_change_header_style');

here in this example there are two pages (ID’s) replaced with that different layout – adjust to your home page ID
this filter has a lot more options. Enter on $header['header_class'] your noted classes from point 3.

see example page: https://clean.webers-testseite.de/

Ultimately, this amounts to an infinite scroll page, doesn’t it? For such a page to have good SEO, the meta information must be readable, and only the performance-relevant elements should be read when necessary.

but you are loading some fonts – how do you load them. I see f.e. a roboto-slab – this is not inside the default drop-down for available fonts.
Try to upload those fonts – by using the font-manager.

i can see this console warning : downloadable font: glyf: empty gid 164 used as component in glyph 165 (font-family: “Roboto Slab” style:normal weight:100..900 stretch:100 src index:0) source: https://fonts.gstatic.com/s/robotoslab/v35/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2

_____
a similar Problem?
btw. : have a look at: https://kriesi.at/support/topic/deprecation-warnings-clogging-up-my-error_log-file/

But main reason is that it is not a 16/9 aspect ratio video.
Enter on that Video Aspect Ratio Field : 1920:814

and remove that object-fit: cover rule – and even the background-color could be removed – everything fits with the right aspect-ratio

only one thing : the one ruleset inside the media query (see Link ) : the hyphens: auto had to be set to !important

hyphens: auto !important;

could you please insert the needed Rest of css Code :

https://kriesi.at/support/topic/flip-box-behavior-all-wrong/#post-1487126

maybe it is best to give the class to one of its parents ( not the anchor element itself)

f.e.:

jQuery(document).ready(function() {
	jQuery('.sbi_link').addClass('noLightbox');
});

Can you see your child-theme functions.php on: Dashboard – Appearance – Theme File Editor ? click on the right side the “Theme Functions” functions.php and see what is the content on line 32 and following.

May be you post that block you have entered there.

and in addition – some magic of “container-type” property and font-size adjust via cqi
to have more legible font sizes!

@media only screen and (max-width: 989px){
  #top .gridded-flipbox .avia-icongrid-flipback  .avia-icongrid-inner {
    padding: 20px !important;
  }

  #top .gridded-flipbox .avia-icongrid-flipback {
    container-type: inline-size;
  }

  #top .gridded-flipbox .avia-icongrid-flipback p {
    hyphens: auto;
    font-size: 9cqi;
    line-height: 1.5em
  }
}

i found your site – and i see that you have set the min-height option – remove that
See on the element on Styling – Grid Styling – “Minimum Height – For Flipbox Only”

Unfortunately, few of my fellow participants have the courage to publicly post links to their websites here. Otherwise, it would surely have been resolved by now.

you only had to adjust that one rule:

#top .gridded-flipbox .avia-icongrid-wrapper, #top .gridded-flipbox .article-icon-entry {
  width: 100%;
  height: 100%;
  min-height: unset !important;
}

and maybe you set the gap a bit smaller than 30px

have you seen my page: https://webers-testseite.de/gridflip/