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

For requests for help from CG administrators, Wranglers, and experienced CG members. Please read the FAQ before posting. Also look at CG Wiki for tutorials and how-tos written by other CG webtoonists.
Post Reply
User avatar
Bobadventures
Regular Poster
Posts: 225
Joined: Mon May 01, 2006 5:49 pm
Location: Los Angeles, CA, USA
Contact:

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

Post by Bobadventures »

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.
Image

User avatar
Cope
Incompetent Monster
Posts: 7360
Joined: Sat Jul 31, 2004 8:37 pm
Location: Masked man of mystery
Contact:

phones ruin everything

Post by Cope »

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.
Image Image
"I've always been fascinated by failure!" -Charlie Brown

User avatar
LibertyCabbage
Cartoon Hero
Posts: 4665
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country
Contact:

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

Post by LibertyCabbage »

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;">
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"

User avatar
Bobadventures
Regular Poster
Posts: 225
Joined: Mon May 01, 2006 5:49 pm
Location: Los Angeles, CA, USA
Contact:

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

Post by Bobadventures »

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.
Image

User avatar
LibertyCabbage
Cartoon Hero
Posts: 4665
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country
Contact:

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

Post by LibertyCabbage »

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.
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"

Post Reply