OAM <Object> from Animate to Dreamweaver Responsive but leaves a big gap

Forum|Forum|5 years ago
March 6, 2021
1 respuesta
381 visualizaciones

I have an issue with an OAM animation I created in Adobe Animate CC and placed on a web page using Dreamweaver and html5. The animation scales very nicely between lg-xs screens but as the screen size dips below 1200 wide (lg to md) you see the gap betweeb the animation <object> and the next element grow substantially larger. You can simulate this easily in Dreqmweaver using live mode and scaling the page size. The web page looks great on my PC full screen but on the android phone the gap between these elements is half the screen. I have seen a few writings about this issue on other media sites but none with clear answers.

Este tema ha sido cerrado para respuestas.

BenPleysier

Community Expert

Please supply the link o the page.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

A

andrewandterryAutor

Participating Frequently

Thanks for taking an interest. You can see this issue at https://andrewandterry.net

The first element on the page is the animated OAM <object> followed by a bootstrap navbar.

Just below is another animated OAM which is much smaller but has the same responsive issue,

Nancy OShea

Community Expert

In addition to what Ben pointed out...

1. Only 1 version of Bootstrap is allowed. You should not have multiple versions in the same file. FYI: the current release version is 4.5, soon to be 5. Why are you still using ver 3 which hasn't been updated in several years?

2. You have extra CSS links that are going to 404 Not Found files. I don't think you need any of these.

<link rel="stylesheet" href="css/marquee.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap.theme.min.css" />

3. Edge Animate is discontinued. It hasn't been actively developed since 2015. You could switch to Animate CC or use a short looping video. But for something this basic an animated GIF might be better.

As an example,

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body class="bg-dark">
<div class="container-fluid">
<div class="row">
<header class="col mx-auto">
<!--insert your animated gif here-->
<img class="img-fluid" src="https://dummyimage.com/1600x400" alt="placeholder">
</header>
</div>
</div>
<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="index.html"> 
<!--Your logo goes here--> 
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x75" alt="logo/brand"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item current"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">sub-1a</a> <a class="dropdown-item" href="#">sub-1b</a> <a class="dropdown-item" href="#">sub-1c</a> </div>
</li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>

<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-5">Bootstrap 4.5 with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a> </p>
</div>
<div class="container-fluid">
<div class="row text-center text-light">
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
 
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>

</div>
<hr class="my-4">
<div class="row">
<footer class="col"> <small>© 2019 Footer goes here</small> </footer>
</div>
</div>


<!--Supporting scripts: jQuery, popper then Bootstrap JS.--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Regístrese

Social Login

Bienvenido

Social Login

Escaneando el archivo en busca de virus

Este archivo no se puede descargar