Make image float together with scrolling text

Hi vadikcoma,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

.avia-image-container.avia_animated_image.avia-builder-el-3 .avia_image {
    position: fixed;
    top: 100px;
    left: 125px;
    width: 25%;
    z-index: 0;
}
#howtoget .template-page.content.av-content-full.alpha.units {
      z-index: 100;
    background-color: #f2f2f2;
}
#full_slider_1 { z-index: 100; } 
#register .template-page.content.av-content-full.alpha.units { 
    z-index: 100;
        background-color: #ededed;
 }

If you need further assistance please let us know.
Best regards,
Victoria

Hi,

May you clear your cache and tell me which is the browser that youre using? Because Im using the Chrome and all is working normally.

Best regards,
John Torvik

Hi vadikcoma,

I think you should hide the image for mobile and for bigger screens you need to add this code:

@media only screen and (min-width: 1280px) {
  #register, #howtoget {
  position: relative;
  z-index: 22;
}
}

Your Layer Slider has slides of different height, and the image can be seen under the smaller slide on the big screens, you need that slide taller.

Best regards,
Victoria

Hi vadikcoma,

That’s animation, and it looks buggy. I think it’s better to disable animation for that middle block. It can be done in Advanced Layout Builder.

Best regards,
Victoria

Hi vadikcoma,

You could use this:

#bonuses .av-styling-no-styling .avia_image {
    top: 200px;
}

But your Layer Slider has slides of different height, which does not make it look good. It should be 640-700px height, than this solution will be fine. Otherwise, you’ll need to use JavaScript to watch the image and control it.

Best regards,
Victoria

Hi vadikcoma,

What happened to the initial solution? It was working fine or not?

Best regards,
Victoria