Many thanks! I BELIEVE that I understand what you've written.
Let me explain what I'd previously thought. First, that the values in the "p. ul" rule in a media query would be affected by or take precedence over a rule in the same media query segment, so long as it had a specific class. That is, I thought that, regardless of the font size set in "p, ul" of a media query, the font size value for the <p> tag having a ".caption" class would rule on its own. It appears that I was wrong with that presumption.
Here's what I've now done; kindly advise me of any wrongdoing.
a. In the "700px to 1000px media query," I entered this:
. . .
p.caption, .caption {
font-size: 88%;
}
. . .
b. For the smaller "0px to 700px media query," I entered a smaller font size:
. . .
p.caption, .caption {
font-size: 76%;
}
. . .
c. For the "0px to 568px media query," I removed the ".main-content p" rule that appeared to conflict with the font size of the <p> tag when viewed in "0px to 568px" windows.
Having done that, I like the font sizes of the <p> tag and the "p.caption" rule, no matter the narrowing width of the browser window. AND, none of the "p, ul" media query entries have an "!important" declaration! ( ; - )
Have I understood what you've written correctly?
Does the <p> font size look appropriate to you when the window is narrowed on your device?
Might you suggest a further tweak? . . .
Thanks, yet again, Gerry.
Warren