Boxed layout with full width header and footer

Hey Erwin,
The footer & socket are inside the main container, so you will need this JavaScript to move them after it:
Add to your child theme functions.php file

function move_footer_scoket_after_main() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function () {
  const main   = document.getElementById('main');
  const footer = document.getElementById('footer');
  const socket = document.getElementById('socket');

  if (!main || !footer || !socket) return;

  const parent = main.parentNode;
  parent.insertBefore(footer, main.nextSibling);
  parent.insertBefore(socket, footer.nextSibling);
});
</script>
  <?php
}
add_action( 'wp_footer', 'move_footer_scoket_after_main', 99 );

Then add the css for the header, footer, & socket:

.responsive.html_boxed.html_header_sticky #header,
#footer, #footer .container, 
#socket, #socket .container {
    width: 100vw;
    max-width: 100vw;
		left: calc(-50vw + 50%); 
}

Best regards,
Mike

Hi,
That won’t work out, I recommend removing the above solution and using the stretched layout, then add padding/margin to the content area to give a boxed appearance and adding the title to the slideshow instead of using a negative margin for a constant placement on different screen sizes.

Best regards,
Mike

Hi,
As I see the .content div is overlapping the slider, if you want it overlapping more you would increase the negative margin.

Best regards,
Mike

Hi,
Try this css:

.container .av-content-full.units {
    width: 95%;
} 

Best regards,
Mike

Hi,
Glad that we could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

Best regards,
Mike