I have used custom CSS to specify 16px font for various text elements. Most of my questions are multiple choice or matrix with radio buttons. My survey looks as I intend on a computer monitor, but on mobile, while the response choices (QuestionBody) are 16px, but the question text is 14px.
While I understand CSS in principle, I am coding novice. It appears to me that Qualtrics accepts my custom code for the question body, since the Inspector indicates the active code is "inline" (can you confirm that this refers to my custom CSS?):
.Skin .QuestionBody {
font-size: 16px!Important;
   padding-bottom:16px!Important;
   }
Meanwhile, my general code for the question text looks like this (not sure about the BorderColor block--this is just me grasping to make something happen while developing the code):
.Skin .Inner.QuestionText {
   font-size:16px;!Important;
   margin-top:16px!Important;
   margin-bottom:0px!Important;
   }
.Skin .QuestionText .BorderColor {
   font-size:16px;!Important;
   margin-top:16px!Important;
   margin-bottom:0px!Important;
   }
However, in the mobile preview (and, by my visual inspection, on my phone), the inspector reveals that the same text is formatted at 14px.
Thinking I would be clever, I added the following:
@media only screen and (max-width: 480px!Important) {
.Skin .QuestionText {
   font-size:16px;!Important;
   margin-top:16px!Important;
   margin-bottom:0px!Important;
   }
.Skin .QuestionText .BorderColor {
   font-size:16px;!Important;
   margin-top:16px!Important;
   margin-bottom:0px!Important;
   }
.Skin .QuestionBody {
   font-size: 16px!Important;
   padding-bottom:16px!Important;
   }
}
However, after this addition, the inspector seems to reveal that perhaps a built-in @media is overriding mine(?!). The inspector indicates that the active code is:
stylesheet.css: 1756 @(max-width: 480px)
.Skin .QuestionText {
   font-size: 14px;
}
Help? Thanks!