Copy link to clipboard
Copied
I am using Dreamweaver CS6 on a mid-2011 iMac. I designed and published a website http://wisconsin-auto-historians.org/index.html
When viewing the home page on my iMac the subhead in the body appears correct showing it as 18pt Ariel bold italic. When viewing the home page on my iPhone7 the subhead appears much smaller, 12 pt Ariel Bold italic. this happens on three of the website pages (About Us, Activities and Contact). On the Wisconsin Projects, Join and The Spark/Carhart pages the subhead appears as the correct size, 18pt Ariel bold italic. I have compared the code for all the pages for the subhead in there is no difference in the code other than the wording of the subhead.
My question is How do I fix this? Here are screen shots of the “About Us” page from the iMac and iPhone.
As you can see the iPhone subhead is much smaller than the iMac subhead.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/pages.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>About the Wisconsin Society of Automotive Historians</title>
<meta name="keywords" content="Wisconsin, antique auto, Wisconsin historians,, old cars weekly, old cars, the Spark, Iola, Society of Automotive Historians,">
<meta name="description" content="The Wisconsin Society of Automotive Historians (WSAH), in addition to being a chapter of the Society of Automotive Historians, Inc. (SAH), is a non-profit organization affiliated with the Wisconsin Historical Society (WHS)...">
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #96F;
}
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #633605;
}
body {
background-image: url(images/web-1-pg-bckgrnd-rule.png);
background-repeat: repeat-x;
margin-top: 0px;
background-color: #553f28;
}
</style>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #969;
}
a:link {
color: #960;
}
</style>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
</head>
<body>
<table width="939" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="30" rowspan="5" valign="top"><img src="images/shadow-Left-side.png" width="30" height="508" alt="left-side-shadow" /></td>
<td width="235" bgcolor="#E8D9C9"><img src="images/web-1-row1-col1_165px.png" alt="Logo-top" width="235" height="165" border="0" /></td>
<td width="645" bgcolor="#E8D9C9"><img src="images/web-1-row1-col2-115pxh.png" width="645" height="115" alt="logo type banner" /><!-- InstanceBeginEditable name="links" --><span class="a-link-active">About Us</span><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="mission.html">Our Mission</a><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="activities.html">Activities</a><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="projects.html">Wisconsin Projects</a><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="join.html">Join</a><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="links.html">Links</a><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="contact.html">Contact</a><img src="images/transparent_gif.gif" width="10" height="10" alt="spacer" /><a href="spark_carhart.html">The Spark/Carhart</a><!-- InstanceEndEditable --></td>
<td width="30" rowspan="5" valign="top"><img src="images/shadow-right-side.png" width="30" height="508" alt="right-side-shadow" /></td>
</tr>
<tr>
<td width="235" bgcolor="#F2EADE"><img src="images/web-1-row3-col2.png" alt="logo-bottom" width="235" height="15" border="0" /></td>
<td width="645" bgcolor="#F2EADE"><img src="images/web-1-row3-col2.png" width="645" height="15" alt="row3-col2" /></td>
</tr>
<tr>
<td width="235" align="center" valign="top" background="images/web-1-body-bckgrnd.png"><!-- InstanceBeginEditable name="left-sidebar" -->
<p><img src="images/iola-2012-089.png" width="200" height="202" alt="WSAH Signage" /></p>
<p> Our booth signage.<br />
<img src="images/transparent_gif.gif" width="99" height="250" alt="spacer" /></p>
<!-- InstanceEndEditable --></td>
<td width="645" align="left" valign="top" background="images/web-1-body-bckgrnd.png" class="bodylinks"><!-- InstanceBeginEditable name="body" -->
<p class="subhead-text-18pt-light-brown">About Us</p>
<p class="bodylinks"><img src="images/Cert-of-affiliation-sticker.png" alt="Certificate of Affiliation" width="200" height="220" align="right" />The Wisconsin Society of Automotive Historians (WSAH), in addition to being a chapter of the <a href="http://autohistory.org" target="_blank">Society of Automotive Historians, Inc.</a> (SAH), is a non-profit organization affiliated with the <a href="http://wisconsinhistory.org" target="_blank">Wisconsin Historical Society</a> (WHS). </p>
<p class="bodylinks">The Wisconsin Historical Society is one of most active historical societies in the nation and was established in 1846, two years before Wisconsin became a state. </p>
<p class="bodylinks">WSAH meetings are held three times a year, with established sites for the official Annual Meeting at the<img src="images/kissel-emblem.png" alt="Kissel Mascot" width="98" height="100" align="right" /> <a href="https://www.iolaoldcarshow.com" target="_blank">Iola Car Show</a> in July, at the Hill and Valley car show and tour in Cross Plains in September and in April at The Wisconsin Automotive Museum in Hartford, home of the Kissel. Other activities are varied and scheduled as they come about.</p>
<p class="bodylinks"><img src="images/spark-ad.png" align="left" width="165" height="200" alt="The Spark ad" />A few words about our WSAH logo, created in 1979: The “Spark” steam vehicle, developed by Dr. J.W. Carhart of Racine in 1871, is thought to be the first automobile in Wisconsin and, some say, in the United States. The silhouette was drawn from an early photograph and is set within an outline of Wisconsin. </p>
<p class="bodylinks">Wisconsin Lore and Legends, a regular feature in some newspapers. This article is for the “Spark” circa 1877.</p>
<!-- InstanceEndEditable --></td>
</tr>
<tr>
<td bgcolor="#d9bf9c"><img src="images/transparent_gif.gif" width="200" height="10" alt="spacer" /><br /> <img src="images/bottom-rule-235w.png" width="235" height="6" alt="bottom rule 235" /></td>
<td bgcolor="#d9bf9c"><img src="images/transparent_gif.gif" width="600" height="10" alt="spacer" /><br /> <img src="images/bottom-rule-643w.png" width="643" height="6" alt="bottom rule 643" /></td>
</tr>
<tr>
<td width="235" bgcolor="#d9bf9c"><img src="images/transparent_gif.gif" width="10" height="20" alt="spacer" /></td>
<td width="645" bgcolor="#d9bf9c" class="copyright-12pt-brown">© 2020 Wisconsin Society of Automotive Historians, U.S.A. - All rights reserved. Website design – <a href="http://www.jazgraphics.com" target="blank" class="copyright-12pt-brown">JAZ Graphics</a><br />
<img src="images/transparent_gif.gif" width="100" height="6" alt="spacer" /> </td>
</tr>
</table>
<table width="880" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/WSAH.png" width="880" height="100" alt="WSAH Logotype" /></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>
Thank you for any help you may have. Jessica Z.
Copy link to clipboard
Copied
Unfortunately, your site is not designed responsively to work well on all devices. So the device is self-adjusting for your design failures. That may seem harsh to say but it's an accurate description of what's happening.
IMO the only solution is to ditch the outdated table-based layouts and re-build your site responsively to work well on ALL devices -- extra small, small, medium, large, extra large and everything in between.
If you're new to RWD (responsive web design), there are frameworks you can use. The most popular one being Bootstrap which is a mobile-first framework, followed by Foundation, Pure, Skeleton and others.
https://www.w3schools.com/bootstrap4/
And if you're interested in upgrading to modern software, Bootstrap is integrated into the latest Dreamweaver CC.
https://helpx.adobe.com/dreamweaver/using/whats-new.html
Copy link to clipboard
Copied
Helo Nancy.
Thanks for the reply. I do understand about the RWD makeover but on the iPhone it is only three of the six pages that have this problem Three pages work fine (Projects, Join and The Spark/Carhart) for the subheads and three pages (About Us, Activities and Contact) do not. What would cause that to happen?
Copy link to clipboard
Copied
What's the URL to a "good" page and a "bad" page?
Inconsistent code, code errors and a bad layout apporach can all contribute to X browser rendering problems.
Use the W3C online code validation service to check for errors.
Copy link to clipboard
Copied
The URL for the home page is
http://wisconsin-auto-historians.org/index.html
It is the same URL on an iMac and on an iPhone. This one of the three pages that does on appear correctly on an iPhone. The other pages that do not work are:
http://wisconsin-auto-historians.org/activities.html
and
http://wisconsin-auto-historians.org/contact.html
These pages that do appear correct are:
http://wisconsin-auto-historians.org/projects.html
http://wisconsin-auto-historians.org/join.html
http://wisconsin-auto-historians.org/spark_carhart.html
Other than this, I do not know why all the pages work fine on my iMac in Safari, Firefox and Google Chrome and
on my PC laptop with Windows XP, all the pages work fine.
It is only the three pages viewing them on the iPhone that have a problem.
By the way, I have used the make a “new fluid grid” page in Dreamweaver CS6 for another client and that worked out rather well on both iMac and iPhone.
http://www.alwhite.net/index.html
It seems I am at a loss about the subhead problem with WSAH website on iPhone.
I will look into “Bootstrap” then perhaps pursue that as far as RWD in the future.
I only wish this little glitch was not there for the iPhone. I do not have a different “smart phone” to compare the site to so I do not know if it is only an IPhone glitch.
Anyway, I really appreciate you taking the time to answer my question.
Regards and Be Well and Be Safe!
Jessica Z.
Copy link to clipboard
Copied
iOS Safari doesn't like code errors. So your short term goal is to clean up the code errors.
Your index page has 3 errors
https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwisconsin-auto-historians.org%2Findex.html
The activities page has 3 errors.
Contact has 8 errors
When you get around to re-building, I don't recommend using Fluid Grid Layouts. It was nice idea when it came out 8 years ago but it did not hold up. Adobe subsequently abandoned FGL in DW CC.