0

I am currently building an email template that needs to be responsive for mobile devices with appropriate text stylings and elements sizing. For example, when I apply a class for all p elements, I use class:

.mcnTextContent p {
  font-size: 14px;
}

And it perfectly works in resulting template.
But the problem is that if I try to use media queries and use classes like:

@media only screen and (max-width: 1024px) {
  .mcnTextContent p {
    font-size: 10px;
}

or

@media only screen and (min-width: 1024px) {
  .mcnTextContent p {
    font-size: 14px;
}

They don't apply to elements and in resulting email p elements have just standard font size.
Any help or suggestions are really appreciated.

SlarVer
  • 1
  • Context is important. What email environment are you testing this in: Operating system, browser/app/program, version numbers? What other CSS do you have? – Nathan Aug 29 '21 at 22:28

1 Answers1

0

Make sure you have <meta content="width=device-width, initial-scale=1" name="viewport" /> to your html head class. If it is still not working, read this.