Highlighted

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

Explorer ,
Dec 03, 2018

Copy link to clipboard

Copied

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

TOPICS
Learn Dreamweaver

Views

460

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Dec 03, 2018

Copy link to clipboard

Copied

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

TOPICS
Learn Dreamweaver

Views

461

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 03, 2018 0
Adobe Community Professional ,
Dec 03, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Adobe Community Professional ,
Dec 03, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Mentor ,
Dec 03, 2018

Copy link to clipboard

Copied

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 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Adobe Community Professional ,
Dec 03, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Mentor ,
Dec 03, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Mentor ,
Dec 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Adobe Community Professional ,
Dec 03, 2018

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Mentor ,
Dec 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2018 0
Explorer ,
Dec 04, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 04, 2018 0
Mentor ,
Dec 04, 2018

Copy link to clipboard

Copied

Hi Carolyn

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

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

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 04, 2018 1
Mentor ,
Dec 04, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 04, 2018 1
Explorer ,
Dec 05, 2018

Copy link to clipboard

Copied

And it will align center on ALL devices?

Thanks

Sent from my iPhone

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2018 0
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

carolyn@10541  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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2018 0
Mentor ,
Dec 05, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2018 0
Explorer ,
Dec 05, 2018

Copy link to clipboard

Copied

Thank you.

Sent from my iPhone

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2018 0
Explorer ,
Dec 05, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2018 0
ALsp LATEST
Mentor ,
Dec 05, 2018

Copy link to clipboard

Copied

My pleasure.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2018 0