Francis Ngo Francis Ngo - 6 months ago 21
HTML Question

fonts too small on iOS but on android and desktop is fine?

Is there something about iOS phones/tablets that does not resize my font and css settings? It works fine when I view you view on an Android. Can someone explain or help me with a solution? See images below:

Android

Android

iOS

iOS

link: https://jsfiddle.net/w9357vxo/
here is a snippet code:

<div class="twocol smwidth">
<div class="col1">
<h2>The Situation</h2>
<p>
For vacationers, deciding to take a cruise is exciting, but choosing the right one requires a great deal of information, cost consideration, and input from friends and family. Carnival wanted to make the process easier by recommending cruises that would best suit the lifestyles, demographics and interests of their passengers.
</p>
<p>
They also wanted to make it easy to share details with travel companions. Carnival needed a more personalized communication strategy to help their prospective passengers navigate through the decision process.
</p>
</div>
<div class="col2">
<h2>The Solution</h2>
<p>
Carnival collected email addresses on their homepage as part of the lead generation efforts, but Nimblefish helped them to capture additional relevant data that would lead to a more personalized communication. Prospective passengers were asked:
</p>
<ul class="list">
<li>Tell us about yourself! (Are you a Family with small kids? Teens? A group? Single?)</li>
<li>Where do you want to go? (Alaska? Mexico? Caribbean? Undecided?)</li>
<li>How do you do fun? (Relax in the sun? Shopping? Explore Nature? Island Adventure?)</li>
<li>Are you new to cruising? Are you a former guest of Carnival? Where do you live?</li>
</ul>
</div>
</div>


css:

h1 {
margin:0;
margin-bottom:25px;
padding:0;
font-size:24px;
font-weight:700;
text-align:center;
}
h2 {
margin-bottom:20px;
padding:0;
font-size:18px;
font-weight:800;
}
p {
font-size:17px;
color:#808285;
}
.list li {
font-size:17px;
color:#808285;
}

Answer

The problem is not the font-size, it is how you have made things responsive. You should get rid of the fixed widths and replace them by max-widths. Also you should add img {max-width: 100%;} to the image. When you do that, everything will be properly responsive, solving your problem along the way. I have fixed it in this file: https://jsfiddle.net/uek15fmq/

Comments