• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Subhead size on a web page is inconsistent viewing on iMac vs iPhone

New Here ,
Apr 19, 2020 Apr 19, 2020

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. iMac screen shotiMac screen shotiPhone screen shotiPhone screen shot

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 &ldquo;Spark&rdquo; 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. 

Views

160

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
community guidelines
Community Expert ,
Apr 19, 2020 Apr 19, 2020

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Apr 19, 2020 Apr 19, 2020

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?

Votes

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
community guidelines
Community Expert ,
Apr 19, 2020 Apr 19, 2020

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.

https://validator.w3.org/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Apr 19, 2020 Apr 19, 2020

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.

 

 

Votes

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
community guidelines
Community Expert ,
Apr 19, 2020 Apr 19, 2020

Copy link to clipboard

Copied

LATEST

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.

https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwisconsin-auto-historians.org%2Factivities...

 

Contact has 8 errors

https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwisconsin-auto-historians.org%2Fcontact.ht...

 

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines