How to place element between two sections

Support
#1

Hi, I would like to rebuild the landingpage where the video is above 2 different backgrounds.

rolemodel here: https://www.screencast.com/t/EtzChpi2eA (blue and white background behind video)

Maybe this can be done with CSS? by moving the element (embedded video) with negative margin beyond the edge of 1 section?

I highly appreciate your support!

#2

Hi Gerald,

Add a class name like my-overlap class to column that you want to overlap, then add this CSS :

@media (min-width:979px){

.my-overlap{
position:relative;
top:-150px;
}
}

Negative margin is not recommended because it will still take it position even after it moves on top and will give you blank space right where it should originally.

I also notice a console error on your site because of the code you have added on Global JS.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.10&appId=111836832718705";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>    </script>

Note that global JS is intended for JS script only and the following line <div id="fb-root"></div> will cause error because that is a html code. Add something like this instead on your child theme functions.php file:

/*Pixel Code*/
function fb_print_pixel_event(){
 ?>

<!-- FB CODE HERE -->

 <?php  }

 add_action( 'wp_head', 'fb_print_pixel_event' );

For more customization guide, see this: https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208

Hope this helps.

#3

Hi Lely,

Thank you so much for your help!

In regards to the overlap. your suggestion looks great on desktop but does not on mobile.

  1. Any tipps how to solve this?

  2. Additionally there is now a big gap below the video. How can i fix this?
    https://screencast.com/t/LSXrRY1beB

Thanks for pointing out the JS error. I am not sure what i need this code for and who put it there.
Anyway since i am placing a comment box on that page i replaced the code with the one that facebook plugin suggests.

  1. do i have to put this code from facebook on all the page where i would like to have fb comments or can it be in the global js?
  2. is there still an error now? (i didnt change anything on functions.php, but replaced the previous code with the current one)

Thanks again for your support

#4

Hi There,

If you want the overlap on mobile too and to remove space, please remove the media query from the CSS and update it like below:

.my-overlap {
    position: relative;
    margin-bottom: 221px;
}
.my-overlap h1 {
    top: -350px;
    position: absolute;
    left: 0;
    right: 0;
}
.my-overlap .x-video.embed {
    position: absolute;
    top: -311px;
    height: auto;
    left: 0;
    right: 0;
}
.my-overlap .x-btn {
    position: absolute;
    top: 180px;

}

Feel free to adjust the values accordingly. To understand better, please check CSS positioning.

The error is still there because as stated, it should’t be added on GLOBAL JS but rather on child theme functions.php file.

#5

Hi Lely,

You are so helpful. thank you very much.

I jave moved the fb script to functions.php and it it works now! :slight_smile:

I have one final issue though. I tried to fix the mobile view for 2 hours and still can not figure out the CSS positioning.

The problem is that i have an unwanted space (row in red) between video and the elements after that.

https://screencast.com/t/pLUGyy0dvB

How can i fix this please?

Greetings from Vienna!
Gerry

#6

Hi Gerry,

You can try this code instead.

.my-overlap {
       margin-top: -300px;
}

Hope that helps

#7

Thank you very much for the input but could you have another look? Now the mobile version looks fine but the video is cut off in half on desktop.

see here: https://screencast.com/t/zEFjdAuLm

I tried for 1hour now playing with the positioning CSS and can not figure it out. You would really help me out here as its the last thing to fix before i can launch the site :slight_smile:

#8

Hi there,

Please try to update the code to:

@media (max-width: 767px) {
    .my-overlap {
           margin-top: -300px;
    }
}

Hope this helps.