cssionic-frameworkionic6

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>
   <ion-card-header>
     <ion-card-title>Title</ion-card-title>
     <ion-card-subtitle>Sub Title</ion-card-subtitle>
   </ion-card-header>
   <ion-card-content v-html="data.content">
   </ion-card-content>
</ion-card>

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.

Solution

  • 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: https://ionicframework.com/docs/api/card-content#css-custom-properties