Elements appear overlapped in cornerstone

[VickiCoupe]

My site uses X Theme and I have an element that on the front end needs to be position fixed. However in the backend this causes the text in the header and content to overlap. (At least I think it is the position fixed element causing the problems).

Is there a way to prevent this from happening in the cornerstone editor? Or are you aware of anything else that might be responsible for this?

Example screenshot below:

[ruenel]

Hello Vicki,

Thanks for writing in!

You are having this issue because you have inserted a custom page-heading to your first section and that you have this custom css:

.page-heading.x-section{
    width:100%;
    position:fixed;
    background:#fff;
    z-index:2;
    transition:all 0.35s ease-in-out;
}
.ember-view.page-heading.x-section{
    position:relative;
}
.page-heading + .x-section{
    padding-top:219px;
}
.page-heading.x-section h1 + h2{
    margin-top:0;
}
.scrolled .page-heading.x-section{
    padding:15px 0;
}
.scrolled .page-heading.x-section h1{
    font-size:2.5em;
    transition:all 0.5s ease-in-out;
}
.scrolled .page-heading.x-section h2{
    font-size:1em;
    transition:all 0.5s ease-in-out;
}
.scrolled .page-heading + .x-section{
    padding-top:145px;
}
@media screen and (max-width:1200px) and (min-width:961px){
    .page-heading.x-section{
        top:201px;
        padding:30px 0;
    }
    .page-heading + .x-section{
        padding-top:264px;
    }
    .scrolled .page-heading + .x-section{
        padding-top:226px;
    }
}
@media screen and (max-width:979px){
    .page-heading.x-section{
        padding:30px 0;
    }
    .page-heading + .x-section{
        padding-top:189px;
    }
    .scrolled .page-heading{
        top:0;
    }
    .scrolled .page-heading + .x-section{
        padding-top:145px;
    }
}

Please remove your custom class selector on the first section to resolve the issue.

Note: Be aware that custom coding is beyond the scope of our support. You may need to contact the creator of this custom CSS because it affects the elements in Cornerstone builder.

Thank you for your understanding.

[VickiCoupe]

I am well aware of the code, I wrote it. What I was asking is, is there a way to not apply this in the backend?

I wrote the code, because I need it on the front end. If I remove the css it will no longer function as I want it to on the front end.

So Is there a way to prevent this from happening in the cornerstone editor? Is there a way to target only the front end, not the display in the editor?

[tristup]

Hi Vicki,

You can prepend body.ember-application on every selector to make that work only on the front view, not in builder preview.

Thanks