How can I modify the font size of <p> tag inside ion-card-content in ionic 6


Like the question, I am developing a project using vue 3 and ionic 6.

I want to change the font-size of the <p> tag in <ion-card-content>.

my page:

     <ion-card-subtitle>Sub Title</ion-card-subtitle>
   <ion-card-content v-html="data.content">

data.content is requested from the server. Its structure is like this:

<p>This is my page!</p>
<p>Welcome to my home.</p>

I see it styled in chrome devtools.

.card-content-md p {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;

But I don’t know how to modify it, I want to modify font-size: 16px.

Can anyone help? Thank you.


The only way to fix this problem is to remove the ion-card-content tag and replace with a div tag with the same characteristics as the ion-card-content. This is a way better solution because now you can customize your ion-card-content.

I try the same way and it works for me. Remember that ion-card-content has no CSS information in the ionic documentation:

Answered By – I'mLuisLlanos

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published