Highlighted

Device Preview is looking great, but on all browsers everything is aligned to the left

New Here ,
Mar 26, 2020

Copy link to clipboard

Copied

I made some changes on the Index.html page and assigned class names to all of my images, and properties are right and left "AUTO" and Display is "BLOCK".  Device Preview is fine, but after uploading all the changes, everything is aligned to the left.  

 

I have no idea what the problem is.  Can anyone help me.

 

Thanks,

Morris

 

[Moderator Note: Personal information removed]

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Images have a implied width that is set by the image meta-data. Therefore there is no need to set the dimensions unless you need an image size that differs from the original. The change in size can be achieved using CSS,

 

In your case, I have added margin: auto with

 

 

img {
  border: 0;
  display: block;
  margin: auto;
}

 

the following result:

junk.png

 

TOPICS
Preview, Publish

Views

805

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

Device Preview is looking great, but on all browsers everything is aligned to the left

New Here ,
Mar 26, 2020

Copy link to clipboard

Copied

I made some changes on the Index.html page and assigned class names to all of my images, and properties are right and left "AUTO" and Display is "BLOCK".  Device Preview is fine, but after uploading all the changes, everything is aligned to the left.  

 

I have no idea what the problem is.  Can anyone help me.

 

Thanks,

Morris

 

[Moderator Note: Personal information removed]

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Images have a implied width that is set by the image meta-data. Therefore there is no need to set the dimensions unless you need an image size that differs from the original. The change in size can be achieved using CSS,

 

In your case, I have added margin: auto with

 

 

img {
  border: 0;
  display: block;
  margin: auto;
}

 

the following result:

junk.png

 

TOPICS
Preview, Publish

Views

806

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
Mar 26, 2020 0
Adobe Community Professional ,
Mar 26, 2020

Copy link to clipboard

Copied

Could you share a link to your work in progress so we can see the code? That's the fastest way for us to find issues like this.

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...
Mar 26, 2020 0
Adobe Community Professional ,
Mar 26, 2020

Copy link to clipboard

Copied

Since you provided no URL to your online page, we can only make guesses about what went wrong.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 26, 2020 0
New Here ,
Mar 27, 2020

Copy link to clipboard

Copied

Following is the source code for the Index.html.  The URL is www.uhcainc.org.  I am still in the learning curve.

 

<!doctype html>
<html>
<head>
<link href="css/media.css" rel="stylesheet" type="text/css" media="all and (max-width: 1824px)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
@import url("media.css");
.topheader {
margin-right: auto;
display: block;
margin-left: auto;
}
</style>

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine4/style.css" />
<script type="text/javascript" src="engine4/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine5/style.css" />
<script type="text/javascript" src="engine5/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/timothy.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript"> // This is the script for the banner slider
$(document).ready(function() {

});
</script>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
body {
background-image: url(2018 UHCAINC Bkgnd.jpg);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="cache" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="Enter Keywords" />
<meta name="description" content="Pentecostal church in Greensboro North Carolina" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>United holy Church of America, Inc. - Designed by Judah Enterprise</title>

<!-- TemplateEndEditable -->
<!-- Google Analytics Code Goes Below Here -->
<!-- End Google Analytics Code -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<title>UHCA Administration Slider</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="UHCA Administration Slider" />

<!-- Start WOWSlider.com HEAD section -->
<!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="uhcamenu2_files/css3menu1/style.css" type="text/css" />
<style type="text/css">
._css3m{display:none}
.fixedTop {position:fixed; width:1000px; margin:0 auto: top:0px;}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<!-- End css3menu.com HEAD section -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,4..." rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/extendjQuery.js"></script>

<script type="text/javascript" src="includes/FlexiMenus2/fleximenus2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link href="includes/FlexiMenus2/CSSMenu_CSSMenu1.css" rel="stylesheet" type="text/css" />
<link href="clickhereone.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body style="margin-right: auto">
<div id="outer">

<div id="wrapper">
<p>&nbsp;</p>
<video width="1920" height="1080" controls="controls" autoplay="autoplay" >
<source src="UHCA Website Header Video.mp4" type="video/mp4">
<source src="UHCA Website Header Video.webm" type="video/webm">
<source src="UHCA Website Header Video.ogv" type="video/ogg">
</video>
<body style="background-color:#d7d7d7">

<div style="text-align:right"><a href="https://twitter.com/UHCAINC"><img src="twittericon.png" width="50" height="50" alt="twitter"></a> <a href="https://www.facebook.com/groups/uhcainc/"><img src="fbicon.png" width="50" height="50" alt="facebook"></a>

<div id="CSSMenu1_container" class="FM2_CSSMenu1_container" style="display:block">
<ul id="CSSMenu1" class="FM2_CSSMenu1">
<!-- version=0.0.0;name=CSSMenu1;baseskin=skin14;colorscheme=dark_purple;type=horizontal; -->
<li class="sel"> <a href="index.html" target="_self" class="sel"><font class="leaf">Home</font></a></li>
<li> <a href="#" target="_self"><span class="branch">About Us</span></a>
<ul>
<li> <a href="uhcamission.html" target="_self"><font class="leaf">UHCA Mission</font></a></li>
<li> <a href="uhcahistory.html" target="_self"><font class="leaf">UHCA History</font></a></li>
<li> <a href="uhcaaffirmation.html" target="_self"><font class="leaf">Affirmation of Faith</font></a></li>
<li> <a href="pastandpresentpresidents.html" target="_self"><font class="leaf">Past and Present Presidents Video</font></a></li>
<li class="lastsm" > <a class="lastsm" href="contactus.html" target="_self"><font class="leaf">Contact Us</font></a></li>
</ul>
</li>
<li> <a href="#" target="_self"><span class="branch">Admin Staff</span></a>
<ul>
<li> <a href="bishopcohenbio.html" target="_self"><font class="leaf">Bishop Harry L. Cohen</font></a></li>
<li> <a href="prelaticmissives.html" target="_self"><span class="branch">Prelatic Missives</span></a>
<ul>
<li class="lastsm" > <a class="lastsm" href="prelaticvotingmissive.html" target="_self"><font class="leaf">Prelatic Voting Missives</font></a></li>
</ul>
</li>
<li> <a href="bishoplovebio.html" target="_self"><font class="leaf">Bishop Ralph Love, Sr.</font></a></li>
<li> <a href="bishophargravebio.html" target="_self"><font class="leaf">Bishop Gregory K. Hargrave</font></a></li>
<li> <a href="generalboardofbishops.html" target="_self"><font class="leaf">UHCA General Board of Bishops</font></a></li>
<li class="lastsm" > <a class="lastsm" href="generalfinancedepartment.html" target="_self"><font class="leaf">Administration Staff</font></a></li>
</ul>
</li>
<li> <a href="generaladministrativeforms.html" target="_self"><font class="leaf">Admin. Forms</font></a></li>
<li> <a href="#" target="_self"><span class="branch">Auxiliaries</span></a>
<ul>
<li> <a href="#" target="_self"><span class="branch">General Boards</span></a>
<ul>
<li> <a href="generalboardofelders.html" target="_self"><font class="leaf">Board of Elders</font></a></li>
<li class="lastsm" > <a class="lastsm" href="generalboardoftrustees.html" target="_self"><font class="leaf">Board of Trustees</font></a></li>
</ul>
</li>
<li> <a href="adjutancyministry.html" target="_self"><font class="leaf">Adjutancy Ministry</font></a></li>
<li> <a href="bcsypha.html" target="_self"><span class="branch">BCS/YPHA</span></a>
<ul>
<li class="lastsm" > <a class="lastsm" href="yphagroupportal.html" target="_self"><font class="leaf">YPHA Group Portal</font></a></li>
</ul>
</li>
<li> <a href="uhcaeducationdept.html" target="_self"><font class="leaf">Education Department</font></a></li>
<li> <a href="uhcamissionarydept.html" target="_self"><font class="leaf">Missionary Department</font></a></li>
<li> <a href="musicdepartment.html" target="_self"><font class="leaf">Music Ministry</font></a></li>
<li class="lastsm" > <a class="lastsm" href="uhcaushersdept.html" target="_self"><font class="leaf">Usher's Department</font></a></li>
</ul>
</li>
<li> <a href="hotellodging.html" target="_self"><font class="leaf">Hotel Lodging</font></a></li>
<li> <a href="ucc.html" target="_self"><font class="leaf">UCC</font></a></li>
<li> <a href="hu.html" target="_self"><font class="leaf">HU</font></a></li>
<li> <a href="calendarofevents.html" target="_self"><font class="leaf">Calendar</font></a></li>
<li> <a href="givelify.html" target="_self"><font class="leaf">Donate</font></a></li>
<li> <a href="" target="_self"><span class="branch">Related Links</span></a>
<ul>
<li> <a href="uhcapartnershipform.html" target="_self"><font class="leaf">UHCA Partnership Program</font></a></li>
<li> <a href="MMBB.html" target="_self"><font class="leaf">MMBB Services</font></a></li>
<li> <a href="triadchristianacademy.html" target="_self"><font class="leaf">Traid Christian Academy</font></a></li>
<li class="lastsm" > <a class="lastsm" href="uhcachurchswebsites.html" target="_self"><font class="leaf">UHCA Websites</font></a></li>
</ul>
</li>
</ul>
<span style="text-align: center"></span><span style="text-align: center"></span> <script type="text/javascript">registerFlexiCSSMenu("CSSMenu1", {"menuType":"horizontal","effectSub":{"name":"slide","direction":"up","duration":250,"easing":"swing","useFade":true},"effectRest":{"name":"slide","direction":"left","duration":250,"easing":"swing","useFade":true},"effectSubTwo":null,"options":{"preset":"fixed","enableTablet":true,"enableMobile":true,"mobileMaxWidth":640,"tabletMaxWidth":1023,"tabletCloseBtnLabel":"Close","tabletCloseBtnEnable":true,"align":"center"},"stickToTop":true,"takeBrowserWidth":true});
</script>
</div>

<span style="text-align: center"></span> <script type="text/javascript">registerFlexiCSSMenu("CSSMenu1", {"menuType":"horizontal","effectSub":{"name":"slide","direction":"up","duration":250,"easing":"swing","useFade":true},"effectRest":{"name":"slide","direction":"left","duration":250,"easing":"swing","useFade":true},"effectSubTwo":null,"options":{"preset":"fixed","enableTablet":true,"enableMobile":true,"mobileMaxWidth":640,"tabletMaxWidth":1023,"tabletCloseBtnLabel":"Close","tabletCloseBtnEnable":true,"align":"center"},"stickToTop":true,"takeBrowserWidth":true});
</script>
</div>
<a class="FM2_mobile_button" id="FM2_CSSMenu1_mobile_button"><span class="caption">Menu</span></a> <!-- TemplateBeginEditable name="Content" -->

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
2</script>
<img src="2020-31st-General-Convocation-Postponed.jpg" alt="" width="1000" height="1470" class="uhcapostponement"/>
<p>&nbsp;</p>
<a href="Convocation Postponement Letter_03212020 .pdf"><img src="Missive-for-2020-Convocation.png" alt="" width="1000" height="732" class="uhcamissive"/></a>
<img src="Download-Missive.png" alt="" width="1000" height="30" class="downloadmissive"/>
<p>&nbsp;</p>
<a href="Crumbs For A Cause Campaign.pdf"><img src="crumbs-for-a-cost-450px.jpg" alt="" width="450" height="352" class="crumbs"/></a>
<p>&nbsp;</p>
<a href="https://squareup.com/store/uhclive"><img src="DVD-Store.png" alt="" width="450" height="253" class="dvdsale"/></a></a>
<div class="amazon" id="amznCharityBanner"><script type="text/javascript">(function() {var iFrame = document.createElement('iframe'); iFrame.style.display = 'none'; iFrame.style.border = "none"; iFrame.width = 310; iFrame.height = 256; iFrame.setAttribute && iFrame.setAttribute('scrolling', 'no'); iFrame.setAttribute('frameborder', '0'); setTimeout(function() {var contents = (iFrame.contentWindow) ? iFrame.contentWindow : (iFrame.contentDocument.document) ? iFrame.contentDocument.document : iFrame.contentDocument; contents.document.open(); contents.document.write(decodeURIComponent("%3Cdiv%20id%3D%22amznCharityBannerInner%22%3E%3Ca%20href%3D%22https%3A%2F%2Fsmile.amazon.com%2Fch%2F23-7214095%22%20target%3D%22_blank%22%3E%3Cdiv%20class%3D%22text%22%20height%3D%22%22%3E%3Cdiv%20class%3D%22support-wrapper%22%3E%3Cdiv%20class%3D%22support%22%20style%3D%22font-size%3A%2025px%3B%20line-height%3A%2028px%3B%20margin-top%3A%201px%3B%20margin-bottom%3A%201px%3B%22%3ESupport%20%3Cspan%20id%3D%22charity-name%22%20style%3D%22display%3A%20inline-block%3B%22%3EUnited%20Holy%20Church%20Of%20America%20Inc.%3C%2Fspan%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cp%20class%3D%22when-shop%22%3EWhen%20you%20shop%20at%20%3Cb%3Esmile.amazon.com%2C%3C%2Fb%3E%3C%2Fp%3E%3Cp%20class%3D%22donates%22%3EAmazon%20donates.%3C%2Fp%3E%3C%2Fdiv%3E%3C%2Fa%3E%3C%2Fdiv%3E%3Cstyle%3E%23amznCharityBannerInner%7Bbackground-image%3Aurl(https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FG%2F01%2Fx-locale%2Fpaladin%2Fcharitycentral%2Fbanner-background-image._CB309675353_.png)%3Bwidth%3A300px%3Bheight%3A250px%3Bposition%3Arelative%7D%23amznCharityBannerInner%20a%7Bdisplay%3Ablock%3Bwidth%3A100%25%3Bheight%3A100%25%3Bposition%3Arelative%3Bcolor%3A%23000%3Btext-decoration%3Anone%7D.text%7Bposition%3Aabsolute%3Btop%3A20px%3Bleft%3A15px%3Bright%3A15px%3Bbottom%3A100px%7D.support-wrapper%7Boverflow%3Ahidden%3Bmax-height%3A86px%7D.support%7Bfont-family%3AArial%2Csans%3Bfont-weight%3A700%3Bline-height%3A28px%3Bfont-size%3A25px%3Bcolor%3A%23333%3Btext-align%3Acenter%3Bmargin%3A0%3Bpadding%3A0%3Bbackground%3A0%200%7D.when-shop%7Bfont-family%3AArial%2Csans%3Bfont-size%3A15px%3Bfont-weight%3A400%3Bline-height%3A25px%3Bcolor%3A%23333%3Btext-align%3Acenter%3Bmargin%3A0%3Bpadding%3A0%3Bbackground%3A0%200%7D.donates%7Bfont-family%3AArial%2Csans%3Bfont-size%3A15px%3Bfont-weight%3A400%3Bline-height%3A21px%3Bcolor%3A%23333%3Btext-align%3Acenter%3Bmargin%3A0%3Bpadding%3A0%3Bbackground%3A0%200%7D%3C%2Fstyle%3E")); contents.document.close(); iFrame.style.display = 'block';}); document.getElementById('amznCharityBanner').appendChild(iFrame); })(); </script></div>
<p>&nbsp;</p>
<img src="UHCA-2019-Theme.png" alt="" width="984" height="183" class="theme"/>
<p>&nbsp;</p>
<div align="left"></div>
<img src="Uhcacontactinfo.png" width="200" height="100" alt="contactinfo"/>
<!-- Start of StatCounter Code for Dreamweaver -->
<div align="center"></div>
<script type="text/javascript">
var sc_project=11081250;
var sc_invisible=0;
var sc_security="b7f1c7de";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
</div>
<noscript><div class="statcounter"><a title="free web stats"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/11081250/0/b7f1c7de/0/" alt="free
web stats"></a></div></noscript>
<!-- End of StatCounter Code for Dreamweaver -->
<a href="http://statcounter.com/p11081250/?guest=1">View My
Stats</a>
</body>
<!-- TemplateEndEditable -->
<div id="footer">
<p class="footer-text">© 2016 United Holy Church of America, Inc - All Rights Reserved - Designed by Judah Enterprise</p></div>
</html>

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...
Mar 27, 2020 0
Adobe Community Professional ,
Mar 27, 2020

Copy link to clipboard

Copied

When using "margin: 0 auto" to center things, you also need to give the container being centered (id="wrapper" in this case) a width other than 100% in order for it to center within its parent.  




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...
Mar 27, 2020 0
New Here ,
Mar 27, 2020

Copy link to clipboard

Copied

Good Afternoon,

 

Thank you for very much.

 

Morris Davis

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...
Mar 27, 2020 0
Adobe Community Professional ,
Mar 27, 2020

Copy link to clipboard

Copied

Images have a implied width that is set by the image meta-data. Therefore there is no need to set the dimensions unless you need an image size that differs from the original. The change in size can be achieved using CSS,

 

In your case, I have added margin: auto with

 

 

img {
  border: 0;
  display: block;
  margin: auto;
}

 

the following result:

junk.png

 


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...
Mar 27, 2020 0