Skip to main content
Morris R. Davis
Morris R. Davis
Participating Frequently
March 26, 2020
Answered

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

  • March 26, 2020
  • 3 replies
  • 1435 views

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]

This topic has been closed for replies.
Correct answer BenPleysier

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:

 

3 replies

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
March 27, 2020

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.  




Morris R. Davis
Morris R. DavisAuthor
Participating Frequently
March 27, 2020

Good Afternoon,

 

Thank you for very much.

 

Morris Davis

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
March 28, 2020

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:

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 26, 2020

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

 

Nancy O'Shea— Product User & Community Expert
Morris R. Davis
Morris R. DavisAuthor
Participating Frequently
March 27, 2020

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,400,600,300,700,800" 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>

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
March 26, 2020

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices