Skip to main content
carolyn@10541
Known Participant
December 3, 2018
Pregunta

Animated Gif Centers on Mobile Devices but not on Desktop and vice versa

  • December 3, 2018
  • 4 respuestas
  • 1609 visualizaciones

Hi, I'm able to center an animated gif I made in Giphy and when I center it on the desktop, it is moved right too far on mobile devices. Here is the link and yes I know I need to clean up the code.

CJ Design & Consulting Homepage

Thank you in advance.

Carolyn

Este tema ha sido cerrado para respuestas.

4 respuestas

BenPleysier
Community Expert
Community Expert
December 4, 2018

Adding to the other replies, there are too many code errors to make any sense of your document. I see opening and closing body and html tags throughout the page.

Please correct these errors first Showing results for https://cjdesignandconsulting.com/ - Nu Html Checker

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

BenPleysier  wrote

Adding to the other replies, there are too many code errors to make any sense of your document.

Agreed on the errors, but it was really easy to center her GIF.

And in addition to code errors, there are usability errors. The menu sub-menus for instance are inaccessible if the screen is too short to show all of the items.

carolyn@10541
Known Participant
December 4, 2018

Ben Pleysier, I mentioned in my post that I know I have to clean up my code, however at the moment I would like to know how to center the animated gif on desktop as well as on mobile devices. You said it was really easy to center the gif but you did not say how.

Thank you in advance.

ALsp
Legend
December 3, 2018

Fix your errors as some others have suggested, but to answer your question, locate the iframe in your page code that contains the animated GIF, then wrap it in a DIV tag, setting that DIV to text-align center. I've done it here for you using an inline style attribute:

<div style="text-align: center">

<iframe src="https://giphy.com/embed/6CBFpUlDxcCrwvX7fZ" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe>

</div>

I'm sure some might wonder why you are using an iframe, but the above code should get you sorted.

Nancy OShea
Community Expert
Community Expert
December 3, 2018

It's vital that you fix your code errors before proceeding.   You have some unmatched <div> </div> tags that will no doubt throw things off. 

To center a divsiion in Bootstrap 3.7, use .center-block class.

An example,

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Centered</title>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

</style>

</head>

<body>

<div class="container">

<div class="row text-center">

<h1>Bootstrap 3.7 Centered</h1>

<div class="col-md-10 center-block">

<img class="img-responsive center-block" src="https://dummyimage.com/600x400" alt="placeholder">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam ad temporibus earum accusantium ipsa voluptatem natus nam, amet eos nostrum quisquam officiis perspiciatis possimus, commodi cumque, consectetur fugiat mollitia odio?</p>

</div>

</div>

</div>

<!--Latest compiled & minified jQuery 3 JS-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--minifed Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
ALsp
Legend
December 3, 2018

Just a quick question...

Making a BS page in DW has some automation for the initial page, but managing a BS layout requires manual coding. Is that right? I remember checking once, but I use DW CC so infrequently and really hate to even open it... so it's a question born of laziness :-)

Nancy OShea
Community Expert
Community Expert
December 3, 2018

To get the most out of Bootstrap, one must be able to manually code and be familiar with the version's contextual and utility classes.   DW has drop-down lists to pull from but believe me, it's much, much faster to work directly with code. 

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Community Expert
December 3, 2018

The file you've linked doesn't center on any device for me.

Did you upload your current work, or is this an old version?