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:
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.
