Overlapping sections no longer overlapping after update

[rainmakernl]

Hi,

I Have two overlaping sections on my website https://www.scheiden-online.nl. On the homepage you see a slider on top and two columns (one is a video) underneath. These two columns were overlapping partly with the slider. Since the last update they have moved down and are no longer overlapping.

This is the css that still is implemented, but no longer seems to work:

@media (min-width:768px) {

.overlapping-class{
position:relative;
top:100px;

}
}

.up-overlapping-class {
margin-bottom: 2em !important;
}

@media (min-width:768px) {
.up-overlapping-class {
position:relative;
top:-150px;
margin-bottom: 0 !important;
}
}

.x-section {
clear: both;
}

.verticalLine {
border-left: solid #9aaf24;
}

@media (min-width: 768px) {
.x-section .x-container.swapcolumns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}

Could you help me out?

Thanks
Auke

[ruenel]

Hello Auke,

Thanks for writing in!

You are having this issue because of your broken CSS. You inserted this:

@media only screen and (max-width:767px){
    .x-logobar .x-brand,.x-logobar .logo_with_text{
        float:none;
    }
    @media (min.width:979px){
        .overlap-class{
            position:relative;
            top:-150px;
        }
    }
     @media (min-width:768px){
        .overlapping-class{
            position:relative;
            top:100px;
        }
    }
    .up-overlapping-class{
        margin-bottom:2em !important;
    }
    @media (min-width:768px){
        .up-overlapping-class{
            position:relative;
            top:-150px;
            margin-bottom:0 !important;
        }
    }
    .x-section{
        clear:both;
    }
    .verticalLine{
        border-left:solid #9aaf24;
    }
    @media (min-width:768px){
        .x-section .x-container.swapcolumns{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:horizontal;
            -webkit-box-direction:reverse;
            -ms-flex-direction:row-reverse;
            flex-direction:row-reverse;
        }
    }

The first CSS @media block should be closed properly like this:

@media only screen and (max-width:767px){
    .x-logobar .x-brand,.x-logobar .logo_with_text{
        float:none;
    }
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

With the latest release and the introduction of the Responsive Styling feature, you can recreate the page and accomplish what you want to display without needing any custom CSS. Less CSS would mean fewer chances of any future conflicts.

Best Regards.

[rainmakernl]

Hi Ruenel,

Yes, that solved the issue. Thanks!

Later I will take a look at the responsive styling feature and maybe redo the page.

Beste Regards,
Auke

[friech]

We are delighted to assist you with this.

Cheers!