Forums: Index Community Central Forum Problems with larger font sizes. Need CSS help
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

50px-Replacement filing cabinet.svg

Note: This topic has been unedited for 3558 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

At the top of the Main Page here:

is this: "1,020 PAGES ON THIS WIKI"

Normally it uses only 2 lines in Firefox.

If I use anything above size 12 fonts in "Minimum font size" setting in Firefox options (content tab, advanced button) it uses 3 lines, and pushes the content space farther down.

It also looks tacky since at larger font sizes the "shouting" with the all caps is emphasized.

Also, larger fonts cause overlap problems with the category links at the top of some pages. For example;

The category links need to wrap to a second line. With 3 or more categories it can be a problem even with smaller fonts.

Many people prefer larger fonts than the default fonts used in browsers with many websites nowadays. I like around 15 in the "Minimum font size" setting. For some reason that 15 setting in the advanced setting page is larger than the 15 setting in the content tab. So to replicate this be sure to use "Minimum font size" setting in advanced Firefox options (content tab, advanced button).

Internet Explorer does not have a font size setting as far as I can tell that effects Wikia pages. "Text Size" in the view menu has no effect. Only the zoom function has any effect, and it completely screws up the main page. It makes the page too wide for my 17-inch CRT monitor using a screen resolution of 1152 by 864. The text extends past the screen edge, and so it is basically unreadable without horizontal scrolling to read each line. --Timeshifter 14:56, January 1, 2011 (UTC)

I added the following CSS to my Special:Mypage/wikia.css and it increased the page text size to 15px without significantly affecting the line spacing:
.WikiaArticle p, dl > dt, dl > dd, ul > li {
    font-size:15px !important;
However, this will probably only work for normal page body text and not stuff inside added div's, pre's, tables, etc. I'm not sure. Maybe you can experiment. -- Fandyllic (talk · contr) 10:09 PM PST 2 Jan 2011
Thanks. I tried it out here:
It allows me to see the end result of 15 for most text, and small text for "PAGES ON THIS WIKI" and the category links at the top.
But I normally run with a "Minimum font size" setting. So I had to turn it off to try out this idea. --Timeshifter 08:06, January 3, 2011 (UTC)
You could also try using 125% instead of 15px which should make 12px text grow to around the same as 15px, but will get smaller or larger depending on the browser setting, I think. -- Fandyllic (talk · contr) 10:13 AM PST 3 Jan 2011

(unindent). Thanks. That works like the other one. Here is the CSS, except with "125%" this time:

.WikiaArticle p, dl > dt, dl > dd, ul > li {
    font-size:125% !important;

It is still the same problem though for people who keep their browser set to a larger font or zoom setting. They see "PAGES ON THIS WIKI" using 3 lines instead of 2. They see the text overlap for the category links at the top. I guess I will have to reinstall Firebug and try out some things.

Firebug seems to slow down Firefox or make it buggy for me, so I uninstalled it after the last time I used it. Maybe I will try clicking the disable button after using Firebug this time, instead of uninstalling it.

I think I need to figure out how to use CSS to change "PAGES ON THIS WIKI" from all caps to lower case. I also may need to extend the width allocated to it so that it doesn't need to wrap to 3 lines instead of the 2 lines it is currently using.

I also need to figure out how to allow the category text at the top to wrap to 2 lines. It is currently allowed only 1 line, and so the text overlaps itself at larger font sizes. --Timeshifter 18:56, January 3, 2011 (UTC)

The "tally" class should allow you to affect the line-height of both the PAGES ON THIS WIKI and PHOTOS ON THIS WIKI text.
.tally {
I noticed that there is problem with using 125% in that it is cumulative for indented text. You can see it on this forum post if you apply the change to Special:MyPage/wikia.css. So I'll have to play around with the CSS to see if I can fix that problem. -- Fandyllic (talk · contr) 11:23 AM PST 3 Jan 2011
Okay I think I found the fix for the cumulative problem. However, I noticed that forums seem to work slightly differently from regular pages, so this may need to be adjusted:
.WikiaArticle p, div > dl, div > ul {
    font-size:125% !important;
Tell me if it works. -- Fandyllic (talk · contr) 11:40 AM PST 3 Jan 2011
Sorry I didn't get back to you about this. I had checked out your last CSS right after you posted it, and it did not help. I tried it out here:
I thought I had gotten back to you, but it was for previous CSS you had suggested. I just tried your last CSS again to be sure. It still does not help. I operate with a "Minimum font size" setting of 15. I still see 3 lines used for "1,022 PAGES ON THIS WIKI". I still see text jumbled together in an overlapping way. I am talking about the category titles that are duplicated at the top of the page under the article title. For example, here:

Another problem with "Minimum font size"

There is another problem with Firefox and "Minimum font size" setting. See this section of another forum thread.

It looks like the problem there has been solved. Can a similar solution be used here?

Community content is available under CC-BY-SA unless otherwise noted.