Known Participant

Pregunta

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

Forum|Forum|7 years ago
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

Learn Dreamweaver

Este tema ha sido cerrado para respuestas.

BenPleysier

Community Expert

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

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@10541Autor

Known Participant

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

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>

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

Nancy OShea

Community Expert

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>

<head>

<title>Bootstrap Centered</title>

<style>

.center-block {float:none}

</style>

</head>

<body>

<h1>Bootstrap 3.7 Centered</h1>

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

<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>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

ALsp

Legend

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

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

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?

Regístrese

Social Login

Bienvenido

Social Login

Escaneando el archivo en busca de virus

Este archivo no se puede descargar