Fixed background color section doesn't work

If it does not work at the moment – a mod is in that installation to look for a little bug with google recaptcha.

BUT : my advice is to hamper that behavior on small screens – because you can not scroll inside the footer content.
If the height of the footer content is higher than the given f.e. mobile-device height – then you can not see all content !!!

i did that with a child-theme footer.php
that is fast done .

see here what i have done with footer i shifted the end main div to the top
see on top the extra container
and the commment at line 275

pastebin

the extra container gives me the possiblity to fill the gap that a fixed footer would create as fixed container.
It is like a spacer with variable calculated height – because we had to react to the variable footer/socket height.

function add_curtain_footer_effect(){	
?>
<script type="text/javascript">
(function($) {
$(window).bind("load resize", function() {
	setTimeout( function() {
		var socketh = $('#socket').outerHeight();
		var footerh = $('#footer').outerHeight();
		var spacerh = socketh + footerh - 5 ;

		$('#distance').css('height', spacerh );
		$('#footer').css('bottom' , socketh);
	}, 150)	
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_curtain_footer_effect');

i did this only for home page on that example

/********* curtain effect***********/

.home #main > div  {
    z-index: 3 !important;
    position: relative !important;
}

.home #footer { 
    left: 0;
    width: 100%;
    z-index: 2;
   position: fixed
}

.home #socket {
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    position: fixed
}

.home #main #distance  {
    clear: both;
    z-index: 0 !important;
}

the clearing on #distance is very important.
so this is then the Structure:

and the #distance height is calculated on load and resize

• This reply was modified 4 years, 4 months ago by Guenni007.

Cancel all said above and look to this solution:

here we go with your example page: https://tuddal.one/

put this to your quick css:

@media only screen and (min-width: 768px){
  #wrap_all {
      padding-bottom: 400px;
  }

  #main > div {
      z-index: 3;
      position: relative !important;
  }

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }
}

But
there are parts of the content ( grid rows ) where you have set to non full width – but there is a better way to have that – because you leave the space left and right to the grid row : transparent.

If i use a grid-row and does not want to have a full-width grid-row – i have a little snippet on that !
( So remove your settings for those grid-rows f.e.: #av-grid-custom-width ) and put this to your child-theme functions.php )
and give to those grid-rows that should not be a fullwidth one the custom-class: grid-notfull

/******** Gridlayout not fullsize - give a custom-class to the grid-row element:  "grid-notfull" *********/
/**** adopt the 1310px to your setting on enfold - general Layout - dimensions ****/
function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

you see what the code above does: it will give the grid-row itself the styling of a .main-color .container and wrap it with a fullwidth container with styling of a color-section.

remove your css code please and change the rule to !imporant:

  #main > div {
      z-index: 3;
      position: relative !important;
  }

And look above on #main #vidde {

the width is not as on color sections. because you gave to the grid-cells a padding.
– the padding of the border cells should have no padding to the border:
left cell
padding: 0px 15px 0px 0 ;
right cell:
padding: 0px 0 0px 15px;

there is two ID’s on that rule:

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }

The reason is: #main > div is a rule with one ID and an additonal element
so it is more specific than a rule with only one ID – because #vidde is a #main > div ( it is a div that follows directly the #main container) – the postion : fixed could not overwrite the #main > div rule.
If an element fullfills more than one selector – the more specific will win that run !

See here f.e. a specifity calculator: https://specificity.keegan.st/

only this:
corrected code including the fix for the submenu

@media only screen and (min-width: 768px){
  #wrap_all {
      padding-bottom: 400px;
  }

#main > div:not(.av-submenu-container) {
    z-index: 3;
    position: relative !important;
}

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }
}

wait – there is a sub-menu – ok i look …

yes : change in the css code above ( inside the mediaquery – not as an addition – a substitue) :

#main > div:not(.av-submenu-container) {
    z-index: 3;
    position: relative !important;
}

so that there is only: https://kriesi.at/support/topic/fixed-background-color-section-doesnt-work/#post-1235469

The not rule excludes the submenu container from that.