0

So finally I created a page with SCSS. But I am getting a problem. I created this card and added scss. Initially, I get a text like this. But after few seconds it's back to what I needed. I have used google font link inside the head tag as well as imported inside scss. But the result is the same. This is only happening with text inside the cards. So here is my SCSS

.blogs {
  .card-heading {
    font-size: 1.3rem;
    color: $card-head-color;
    font-weight: 500;
  }
  p.card-content {
    color: $secondary-color;
    margin-bottom: 0;
  }
  .card-body {
    box-shadow: 0px 0px 22px 0px #e0e0e0;
    background: #ffffff00;
    backdrop-filter: blur(8px);
    border: #ffffff;
    border-radius: 10px;
    padding: 1.25rem;
  }
}
<div class="blogs">
<div class="card card-body mb-3 p-1">
              <div class="row">
                <div class="col-4">
                  <img
                    src="https://www.visa.co.in/dam/VCOM/regional/ap/india/global-elements/images/in-visa-gold-card-498x280.png"
                    class="p-2 rounded"
                    style="height: 60px; width: 70px !important"
                    alt=""
                  />
                </div>
                <div class="col-md-8 pl-0">
                  <small
                    class="text-black text-truncate-3 mb-0 p-col"
                    style="font-weight: 500"
                  >
                    heading of the blog. It could be anything. It needs to be
                    inside this box.
                  </small>
                </div>
              </div>
            </div>
            </div>

enter image description here

enter image description here

0

1 Answer 1

0

did you try smooth font?

.className{
-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
}
4
  • well thanks for the reply, but it didn't workout😐
    – sharmag 2
    May 8, 2021 at 9:47
  • if you share exactly same visual as a demo may be we can help you
    – tsdln
    May 8, 2021 at 9:50
  • 1
    did you try to remove backdrop-filter: blur(8px); you dont need to give blur as extra option for the shadow. if you give it for the shadow
    – tsdln
    May 8, 2021 at 10:12
  • Its nothing to do with blur property. Actually, there was a mistake in my SCSS. That's why i was getting that problem. Thanx for your time.
    – sharmag 2
    May 8, 2021 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.