Topic: mdb-card-text font size

itay pro asked 5 years ago


How can I change the text size of text inside a specific card in its mdb-card-text element, for that specific card (component), not globally.

e.g., I have an info card where I need the text size to be 36px

More specifically, how can I override:

.card .card-body .card-text {
    color: #747373;
    font-size: .9rem;
    font-weight: 400;
}

And in a similar case, how can I remove this margin, at the end of the card's text:

.card-text:last-child {
    margin-bottom: 1rem!important;
}

Thanks


itay pro answered 5 years ago


Thanks,

since ::ng-deep is the same as global scope, I'll use the only approach which is to use a global style, until Angular 9 solves it


Damian Gemza staff commented 5 years ago

If you want, you can try to use the old one approach - div.card-text, but this is not recommended way by us.


Damian Gemza staff answered 5 years ago


Dear @mdb2

If you want to modify the font size of mdb-card-text component within the component styles you would have to use the ::ng-deep pseudoselector.

But again, if you'll use it, you have to specify the custom class for the mdb-card component, because inside the mdb-card-text there's a <p> element, which won't inherit the styles from mdb-card-text component.

And if you won't use some custom class, the ::ng-deep styles will apply styles to the global scope.

This will be changed in MDB 9, but for now, please use one of my approaches.

Best Regards,

Damian


itay pro answered 5 years ago


The problem with a global "custom-class" is that styles that are only for specific components are placed in a global scss file, containing all the global styles.

Placing specific styles in the component's own scss file is a much better approach, yet I fail to see how to implement it with all the new directives.

Pleas advise


Damian Gemza staff answered 5 years ago


Dear [@mdb2](/profile/?id=22796)

If you want to change the styles only for one card element, please add a custom class to it, and then target this element in css by this class.

Please take a look at the below code:

.html:

<div class="row">
    <div class="col-md-6 mx-auto my-5">
      <mdb-card class="custom-class">
        <mdb-card-body>
          <mdb-card-text>Sample text</mdb-card-text>
        </mdb-card-body>
      </mdb-card>
      <mdb-card>
        <mdb-card-body>
          <mdb-card-text>Sample text 2</mdb-card-text>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>

.scss:

mdb-card.custom-class mdb-card-text .card-text {
  font-size: 36px !important;
  margin-bottom: 0 !important;
}

Best Regards,

Damian


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: Yes
  • Provided link: No