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

Report · Dec 03, 2018

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

Report · Dec 03, 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?

Report · Dec 03, 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>

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

Report · Dec 03, 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 🙂

Report · Dec 03, 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 & Moderator

Report · Dec 03, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
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.

It was just a simple question But since you say that, I have to say that your response is not completely accurate. "Contextual and Utility" classes can just as easily be entered in a UI. So, let me clarify my question...

There is no way to visually, in a UI for instance, to add, remove, or reorder columns and rows? Is that right?

Report · Dec 03, 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>

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

Report · Dec 03, 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, the only real Dreamweaver alternative.

Report · Dec 03, 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.

Report · Dec 04, 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.

Report · Dec 04, 2018

Hi Carolyn

I actually did say how. Here is the code I gave you:

</div>

The iframe is already in your code. Simply wrap that iframe inside a DIV and center that DIV with an inline style. Use the above code block as a guide.

Report · Dec 04, 2018

Here is the code I gave you in action:

http://www.projectseven.com/testing/adobe-forum/carolyn/

That should now be easy for you to follow and we can then address the underlying issue of using an iframe in the first place.

Report · Dec 05, 2018

Thank you.

Sent from my iPhone

Report · Dec 05, 2018

My pleasure.

Report · Dec 05, 2018

And it will align center on ALL devices?

Thanks

Sent from my iPhone

Report · Dec 05, 2018

carolyn10541 wrote
And it will align center on ALL devices?

No it only works on Androids . Seriously, you've received multiple answers to your question so far. Why don't you try out the solutions and judge for yourself which works best?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 05, 2018

Nancy,

I was simply asking if this works across devices. I was in client meetings all day so

I had a chance to try anything!

I hope you will think before leaving such a message again.

Thank you

Sent from my iPhone

Report · Dec 05, 2018

Yep. Even works on my refrigerator door (seriously).

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

Photos