CSS Preview showing correctly but not after saving and return to Build Mode

[ZenMonkey]

Hopefully someone will have an idea of what is going wrong between what I see in the CSS Editor preview and what is then shown when the CSS is saved and Weebly reverts to the Build Mode.

I was trying to do some editing on my CSS to better align some banner elements.

The view in the CSS Editor preview was as I wanted:

Here's the relevant CSS section that made it look like this:

/* Banner */
.banner-wrap {
position: relative;
width: 100%;
padding: 55px 0;
box-sizing: border-box;
background: #ffffff url('default-bg.jpg') center center no-repeat;
background-size: cover;
}
.banner-wrap:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
content: ' ';
}
.banner-wrap .container
{
display: table;
overflow-y: hidden;
height: 100%;
margin-left: 0px;
margin-right: 0;
}
.banner-wrap .banner
{
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-left: 0px;
margin-top: 0;
}
.banner-wrap .pelogo
{
position: relative;
width: 100%;
padding: 15%;
height: 100px;
box-sizing: border-box;
background: transparent url('PE-Logo-Only.png') left center no-repeat;
background-size: contain;
margin-right: 0;
margin: 25px 0 -61px 56px;
}
.banner-wrap .banner H2
{
padding-bottom: 30px;
color: #FFFFFF;
word-spacing: 0.1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 100px;
font-weight: normal;
line-height: 1.1em;
margin-bottom: 0;
margin-right: -543px;
margin-top: -182px;
margin-left: -68px;
padding-top: 0px;
/*+placement: 423px -104px;*/
position: relative;
left: 423px;
top: -104px;
width: 17px;
}
.banner-wrap .banner DIV.paragraph
{
padding-bottom: 40px;
color: #FFFFFF;
letter-spacing: 0.03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}
.banner-wrap .banner P
{
padding-bottom: 0px;
color: #FFFFFF;
letter-spacing: 0.03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
margin-bottom: 40px;
margin-right: -18px;
margin-top: -83px;
background-color: rgba(0, 0, 0, 0.214);
padding-top: 9px;
/*+placement: 40px 20px;*/
position: relative;
left: 40px;
top: 20px;
}

However, when I saved the CSS and the CSS editor closed, here's what showed up in the Builder mode window:

[Adam7 · Accepted solution]

Because of how the editor loads content, it's possible with custom themes to see something different when editing the site vs the theme editor.  Have you published your site yet, @ZenMonkey? It's very likely your live site will look like what you see when editing your theme.

[ZenMonkey]

Hey Thanks Adam. You are correct, it did appear correctly when I published it. 

Now, I know it's outside the scope of Weebly's support, but I'm wondering if anyone has an idea of how to fix the code above to resolve the problems I'm seeing (I am just learning CSS, so this is pretty complex for me.)

 At full screen it looks great. Exactly as I designed it. However, as I shrink the screen down or view on mobile, things get wonky. 

Here's a screenshot at 953px wide. The tag line displayed by 

.banner-wrap .banner P

should remain underneat the logo, but it moves up.

As I continue to shrink the screen size, the H2 secion has moved away from the logo and is cut off and the P has continued to move upward relative to the logo and has also been cut off. 

Both text the H2 and P sections should shrink in size and wrap (as they do in the standard theme) and remain position relative to the logo until they get down to a single column or mobile size when they should stack (again, as the standard theme does.)

Any clues or ideas would be greatly appreciated.

[niko1]

Hi Adam,

I have the same problem as @ZenMonkey and was wondering if there is a way to display the css correctly in build mode? I tried closing all my browsers and deleting all my cookies but to no avail.  I see it correctly on the published website, but not in build mode.

Thanks

[Queso]

Hello niko!

Were displaying custom CSS properly in the editor is concerned, I'm afraid we don't have a concrete way to do so, as every potential change is unique, and might not play nice with the editor's own code. If you'd like to check out the looks without interfering with your live site, though, you can always copy the site, and publish the copy to a different URL to see how it performs live.