How can I make my text captions phone-friendly? [Solved]

Bobadventures · Post by **Bobadventures** » Tue Oct 11, 2016 10:56 pm

The text captions I occasionally add under my comic updates look fine on a desktop computer monitor, but show up much too big on a smart phone screen. How can I fix that?

My coding skills are mediocre at best, so please don't be shy about spelling out the exact method of doing this. Thank you.

Please do not say, "Go out on the web and figure it out for yourself!" It amazes me how often I get that answer to html questions, and I take it to mean the responder doesn't know the answer either. You'd think I was a teenager asking about sex in 1950.

You can see what I'm talking about on Tuesday's update. Here-- http://bobadventures.comicgenesis.com

Thanks.

Cope · Post by **Cope** » Tue Oct 11, 2016 11:27 pm

What OS have you got on your phone? IOS, Android, or something else? I checked your site on my iPad and couldn't see any difference, so the problem could even be with your phone's text settings.

LibertyCabbage · Post by **LibertyCabbage** » Thu Oct 13, 2016 6:28 am

It looks fine on my iPhone. You didn't actually specify a font size in your code, though, so it's just going off of whatever's the browser's default setting. Here's what it looks like now:

Code: Select all

<p>
EDIT - Well, the version of this that posted at midnight was a little oversized, plus I've added an extra voice bubble for officer Krelch.  If you're curious, you can view the larger version <a href="https://c2.staticflickr.com/6/5698/29634358373_db21a2764f_o.jpg">here.</a>
</p>

You can add a style to your <p> tag to choose what size you want the font to be, like this:

Code: Select all

<p style="font-size:12px;">

You can also use a style to change the font in other ways, like to make it something besides Times New Roman if you want to. E.g.,

Code: Select all

<p style="font-family:Arial;">

Bobadventures · Post by **Bobadventures** » Thu Oct 13, 2016 12:26 pm

Ah, thank you! I appreciate it.

I'm also pleased to hear that it has been appearing properly on at least some devices, but at least now I can fix it for the others. Of course, that will mean going back through the archives and re-uploading all those text captions, which I will have to figure out when I will have time to do, but c'est la vie.

I'll post here again if I have any trouble implementing your fix.

LibertyCabbage · Post by **LibertyCabbage** » Thu Oct 13, 2016 1:16 pm

Bobadventures wrote:Ah, thank you! I appreciate it.

No problem.

Bobadventures wrote:Of course, that will mean going back through the archives and re-uploading all those text captions, which I will have to figure out when I will have time to do, but c'est la vie.

Nah. Just update the beginning of your index.html and dailytemplate.html (or whatever) pages:

Code: Select all

<head>
<style>

p {
font-size:12px;
}

</style>
</head>

This will set the default font size of all your site's <p> tags.

Comic Genesis Forums

How can I make my text captions phone-friendly? [Solved]

How can I make my text captions phone-friendly? [Solved]

phones ruin everything

Re: How can I make my text captions phone-friendly?

Re: How can I make my text captions phone-friendly?

Re: How can I make my text captions phone-friendly?