hallo @mofix – you can see here an updated snippet that will pull out the enfold options to determine the content width.

https://kriesi.at/support/topic/non-fullwidth-portfolio-or-grid-row-gets-colored-sides/#post-1491061

You’re talking about the grid row element, right?

Edit: sadly you did not post a link to your page – but your screenshot is clear enough – i found your site now.
Because it looks exactly the same when you set a grid-row by css to to be not full-width, I thought you had used this element.

____________

So – why don’t you put the portfolio grid inside a 1/1 Container
The Color-Section can have the one background-color – and the 1/1 Container a different one.

if you then do not want on top and bottom of the 1/1 Container the background-color of the Section just remove padding-top and padding-bottom of 50px.

did you try out my suggestions? https://kriesi.at/support/topic/video-on-home-page-2/

and again see your video placed on one of my testpages: https://webers-testseite.de/lara-video/

the only thing you had to know is the aspect ratio of your video ( in your case 1500:710 ) and this is not 16/9

this belongs to paragraph margin setting. So maybe it is enogh to only get rid of default margin-top value on first p tag.

#top p:first-child {
  margin-top: 0 ;
}

Filesize is on original jpg small enough – so you can insert the full image. Maybe that is a bit sharper then.

And maybe you switch earlier to hamburger menu :

@media only screen and (max-width: 1200px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

hm – if so – then it had to be a part of your layerslider – because on my testpage i got an advanced layerslider too on top – but ajax search acts normal.
https://webers-testseite.de
or https://webers-testseite.de/advanced-layerslider/

sorry Typo in link

css depends on the place where you show it – f.e. in the top header:

#top #wrap_all .av-social-link-bluesky:hover a {
    color: #fff;
    background-color: #1185fe;
}
#top #wrap_all .av-social-link-bluesky a svg * {
    fill: var(--enfold-header_replacement_menu_color);
}
#top #wrap_all .av-social-link-bluesky a:hover svg * {
    fill: #FFF
}

maybe this gives you some hints how it could be obtained: https://kriesi.at/support/topic/the-website-loads-invisible-elements/#post-1490800

you can try:

#top .avia-featureimage-slideshow .avia-caption-title a {
  display: inline-block;
  line-height: 1.4em;
  background-color: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  padding: 5px 8px;
  border: 2px solid #FFF;
  border-radius: 5px
}

Just leave out the border styling if you don’t like to have it. I’ve now adjusted it so that it fits the button.

the position of those arrows is set in testimonials.css by:

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
  margin-top: -1px
}

so if you like them above the content area – try:

@media only screen and (max-width:767px) {
  #top .avia-testimonial-wrapper {
    overflow: visible !important;
  }
  #top #wrap_all .av-large-testimonial-slider .avia-slideshow-arrows a {
    margin-top: -50px;
    opacity: 0.5;
  }
}

but you had to be shure that the content from above the testimonials does not come into conflict with that area.

see my edit above – posting the same time

try:

#top picture.avia_image {
  display: flex !important;
}

and maybe you like to have more contrast on hovering the images:

#top a.avia_image .av-image-caption-overlay-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display:  grid;
  margin: 5px 25px;
  font-size: 1.2em
}

#top a.avia_image:hover .av-image-caption-overlay-center {
  color: #940000;
  background-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}

#top .av-image-caption-overlay-center p {
  margin: 10px 0 !important;
}