i know i need to make the data-animation=false. but what is the line i write?

i tried a few more times. every time i move from staging to live EVERYTHING is messed up. all the media queries stop working and you see double of everything.

nope. didn’t work.

If i change the position from relative to fixed, it fixes it but then the container underneath it is covered

@media only screen and (max-width: 767px)
.responsive #top #wrap_all #header {
position: fixed;

btw, what do you think of the image fix? i think i made it look pretty good on all devices :)

I put an image in. all good. i don’t think it will really solve the problem. originally the cell was all purple and i wanted to make it diagonal. but i just put an img instead.

still nothin. looks same. i put in the code and all the other elements were already defined as you said.

Sure!

This is what it looks like on layerslider backend:

http://i65.tinypic.com/2d29nwo.png

http://i67.tinypic.com/9pxb9l.png

This is what it looks like live:

http://i63.tinypic.com/2ry0hnq.png

http://i68.tinypic.com/d8h2b.png

does this help?

Nope. nothing is working. i cannot for the life of me get the enfold theme to update no matter what i do.

can i just delete the enfold (parent) theme from the wordpress platform and reupload it? i’m using a child theme anyways.

hey i am so sorry for the delay.

i am using the video you sent me and trying to find every possible solution in Google about replacing the current enfold with new enfold on Notepad ++

the only time i thought i got it to work, the site crashed due to errors in the function.php file.

any recommendations?>

Great! In private message find more info

?

Sure!

I already own this plugin.

All the info is here: https://livicons.com/examples#cbp=ajax/step-boxes-02.html?rev=031

But I have added the code for the html, css, and js below.

HTML: <!– Step box 02 –>
<div class=”container”>
<div class=”row”>
<div class=”step-box-02 step1 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Research & Planning</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step1;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: lab.svg;
style: solid;
size: 100%;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step1;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
<div class=”step-box-02 step2 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Design & Develop</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step2;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: pencil.svg;
style: solid;
size: 100%;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step2;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
<div class=”step-box-02 step3 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Test & Deliver</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step3;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: rocket.svg;
style: solid;
size: 100%;
rotate: 45;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step3;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
</div>
</div>

CSS:

/************ Step box 02 ************/
.step-box-02 {
padding: 0!important;
}
.step-box-02 h4 {
color: #263238;
font-size: 16px;
}
.step-box-02 p {
padding: 0 15px 0!important;
color: #78909C;
}
.step-box-02.step1:first-child .line {
background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(40%, #B2DFDB));
background: -webkit-linear-gradient(left, transparent 0%, #B2DFDB 40%);
background: linear-gradient(to right, transparent 0%, #B2DFDB 40%);
}
.step-box-02.step3:last-child .line {
background: -webkit-gradient(linear, left top, right top, color-stop(60%,#B2DFDB), color-stop(100%,transparent));
background: -webkit-linear-gradient(left, #B2DFDB 60%, transparent 100%);
background: linear-gradient(to right, #B2DFDB 60%,transparent 100%);
}
.step-box-02 .line {
position: relative;
height: 1px;
width: 100%;
margin-left: -10px;
background: #B2DFDB;
margin: 55px 0;
}
.step-box-02 .morph-icon {
width: 30px;
height: 30px;
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px;
}
.step-box-02 .straight-icon {
width: 0px;
height: 0px;
position: absolute;
top: 0px;
left: 50%;
margin-left: 0px;
}
@media (max-width: 767px) {
.step-box-02 {
margin-top: 60px;
}
}

JAVASCRIPT:

//Step Box 02 additional animations
$(document).ready(function () {
$(‘.step-box-02′).hover(
function() {
TweenLite.to($(this).find(“.morph-icon”), 0.15, {width:’90px’, height:’90px’, top: ‘-45px’, marginLeft: ‘-45px’, ease: Power0.easeNone});
TweenLite.to($(this).find(“.straight-icon”), 0.15, {width:’30px’, height:’30px’, top: ‘-15px’, marginLeft: ‘-15px’, ease: Power0.easeNone});
},
function() {
TweenLite.to($(this).find(“.morph-icon”), 0.15, {width:’30px’, height:’30px’, top: ‘-15px’, marginLeft: ‘-15px’, ease: Power0.easeNone});
TweenLite.to($(this).find(“.straight-icon”), 0.15, {width:’0px’, height:’0px’, top: ‘0px’, marginLeft: ‘0px’, ease: Power0.easeNone});
}
);
});

any luck?