Basic questions about media query and styling the <p> tag

[RichardUUU]

I have an MJML template that gets auto-loaded with post content for each new email. The post content provides paragraphs marked with the <p> tag and no other class.

My paragraphs are wrapped with <mj-text> and I have set the (mobile) font size. How do I set up a media query to change the desktop font size for those paragraphs that only have the <p> tag and no other class?

I'd also like to add some additional space between paragraphs (not line-height). How can I target those <p> tags to set margin-bottom?

Cheers, Richard

[iRyusa]

Just put a css class on the mj text and target p tag with mj style with css.On 1 Oct 2022, at 17:40, RichardUUU ***@***.***> wrote: I have an MJML template that gets auto-loaded with post content for each new email. The post content provides paragraphs marked with the tag and no other class. My paragraphs are wrapped with and I have set the (mobile) font size. How do I set up a media query to change the desktop font size for those paragraphs that only have the tag and no other class? I'd also like to add some additional space between paragraphs (not line-height). How can I target those tags to set margin-bottom? Cheers, Richard —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[RichardUUU]

Thanks for responding.

I'm getting Attribute class is illegal from <mj-text class="my-text">

Once I get a class on <mj-text> do you mean something like this?

<mj-style inline="inline"> 
  @media (min-width: 480px) { 
    .my-text p {font-size: 18px; margin-bottom: 5px;} 
    }
</mj-style>

[iRyusa]

It’s css-class attribute not class for mjml elements. Remove inline and you should be goodOn 1 Oct 2022, at 18:33, RichardUUU ***@***.***> wrote: Thanks for responding. I'm getting Attribute class is illegal from <mj-text class="my-text"> Once I get a class on <mj-text> do you mean something like this? <mj-style inline="inline"> @media (min-width: 480px) { .my-text p {font-size: 18px; margin-bottom: 5px;} } </mj-style> —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>