How to control font size in table headings?

MichalMolka · October 2016

I would like to know how to control font size in table headings?
They look strange on mobile view and are too large: http://i.imgur.com/MTO4PBL.png
Here is the link to the website: http://skroc.pl/b8a48\

Albert · October 2016

Hey,

did you tried to use Decrease Fonts option under Theme options > Responsive > General section?

MichalMolka · October 2016

Yes.
I have this option set ON all the time.
http://i.imgur.com/0Rknjoz.png

Albert · October 2016

Ok, thanks. So the problem is related with your custom css:

.NaglowekTabeli {font-size:30px;color:#ffffff;text-align:center;vertical-align:top}

So or you need to wrap above css into @media rule for screens larger than 1240px or you need to split above css to have the font size separately and then separated font size, wrap into right @media rule. All @media rules you can find under responsive.css section but for more details about how it works, please check http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

An example of it's usage would be:

@media only screen and (min-width: 1240px) {
    .NaglowekTabeli { font-size: 30px; }
}

Or you can also keep above css and use the following to decrease these headings on mobile devices with css:

@media only screen and (max-width: 767px) {
    .NaglowekTabeli { font-size: 16px; }
}

MichalMolka · October 2016

It turnet out it's my fault. I forget about this my code. Thank you for verification of this problem.

If I disable this code, font size comes back to normal size and color gray.
How to change font color?

Albert · October 2016

Do you mean font color of just the headings (th) in table? If that's what you mean, you need to use custom css to change it's color:

.style-simple table:not(.recaptchatable) th { color: #FFF !important; }

How to control font size in table headings?

Comments