Some CSS that works in the builder but not on the front-end

Beta
#1

Hi @alexander!

I have built a simple CSS slider and placed it as a custom Section background. It works in the builder, but it doesn’t work on the front end. I am not sure if this means anything to you and if it helps you uncover any theme issues.

The log-in details are in the secure note.

Here’s the CSS:

Summary 
$el .slideshow {
  list-style: none;
  z-index: 1;
}
$el .slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 40s linear infinite 0s;
  -moz-animation: imageAnimation 40s linear infinite 0s;
  animation: imageAnimation 40s linear infinite 0s;
}

@-webkit-keyframes 
imageAnimation { 0% {opacity: 0;
 -webkit-animation-timing-function: ease-in;}
 12.5% {opacity: 1;-webkit-animation-timing-function: ease-out;}
 25% {opacity: 1;}
  37.5% {opacity: 0;}
 100% {opacity: 0;}
}

@-moz-keyframes 
imageAnimation { 0% {opacity: 0;
 -moz-animation-timing-function: ease-in;}
 12.5% {opacity: 1;
 -moz-animation-timing-function: ease-out;}
 25% {opacity: 1;}
 37.5% {opacity: 0;}
 100% {opacity: 0;}
}

@keyframes 
imageAnimation { 0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 12.5% {opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 25% {opacity: 1;}
 37.5% {opacity: 0;}
 100% {opacity: 0;}
}

$el .slideshow li:nth-child(1) span { background-image: url(/wp-content/uploads/1.jpg); }

$el .slideshow li:nth-child(2) span {
  background-image: url/wp-content/uploads/2.jpg);
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  animation-delay: 10s;
}

$el .slideshow li:nth-child(3) span {
  background-image: url(/wp-content/uploads/3.jpg);
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  animation-delay: 20s;
}

$el .slideshow li:nth-child(4) span {
  background-image: url(/wp-content/uploads/4.jpg);
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  animation-delay: 30s;
}

Thanks!

#2

I ran into something similar, styling of a button works in the builder but on the front end it misses some styling.

1 Like
#3

I’ve had a similar issue with buttons where the CSS in the builder works but it doesn’t work on the front-end. This is when styling form buttons from a form plugin.

#4

Great idea! I had an issue logging in so I’ll correspond in the secure note. Looking forward to checking it out. Not sure why it’s different than that front end but hopefully we’ll figure it out quickly.

#5

Ok, nevermind I was able to get it working. It’s something in our CSS minifier. I’ll make a note to check on it more in-depth. It was removing line breaks which caused this: @keyframesimageAnimation instead of @keyframes imageAnimation. I updated your CSS to be on one line and it’s working now.

1 Like