Skip to main content
S
slog70
Known Participant
February 9, 2017
Question

Insert responsive animations in bootstrap 3 page?

  • February 9, 2017
  • 2 replies
  • 1999 views

Hi all,

I need to insert an animate cc 2017 animation inside a bootstrap 3 page.

I put the animation inside a fluid container that should fill the whole browser viewport.

This work in a basic page (not bootstrap) but once I put the animation inside a bootstrap page I get the animation in the container a little bigger than it, so, the browser horizontal scroll bar appears (but it should't).

Has anyone narrowed down this problem?

TIA

tony

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 10, 2017

    Screenshots don't tell us anything.  Can you upload your work in progress to a remote server and post the URL?  That way, we can see what you see in a browser as well as the underlying code. 

    Nancy

    Nancy O'Shea— Product User & Community Expert
    S
    slog70Author
    Known Participant
    February 13, 2017

    You're right Nancy: click here to see the problem.

    Horizontal scrollbars should not appear.

    TIA

    O
    osgood_
    Legend
    February 13, 2017

    Horizontal scrollbars are being caused by settting the <div> at a specific width of 1920px in 3 places in the code below:

    <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1920px; height:647px">

    <canvas id="canvas" width="1920" height="647" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1920px; height:647px; position: absolute; left: 0px; top: 0px; display: block;">

    </div>

    </div>

    pziecina
    pziecina
    Legend
    February 10, 2017

    You may find that you need to zero the margin and padding values for the containing element -

    yourContainerName {

    margin: 0;

    padding: 0;

    }

    You should also check that the cc animate animation, was created and exported using % values.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices