0

I have a card in an HTML it is not correctly responsive in mobile phones dimensions

Here is the html:

        <div class="col py-2">
          <div class="card education-card mirror-face">
            <div class="card-body">
              <div>
                <img style="float:left" class="competence-img " alt="logo" src="{{experience.experience_image.url}}"/>
                <h6 style="float: left;padding-top: 17px;" class="education-card-title">{{experience.employer}}</h6>
              </div>
              <h6 style="display: block;" class="education-card-title">{{experience.title}}</h6>
              <div>
              <p class="education-card-desc">{{experience.description}}</p>
              </div>
            </div>
          </div>

Here is the css

.education-card-title {
  color: var(--scolor);
  font-size: 20px;
  font-weight: 500;
}
.education-card-desc {
  color: var(--color);
  font-size: 14px;
  font-weight: 300;
}

Here is what I mean:

enter image description here

my objective is to have it like this:

enter image description here

Balaji
  • 37
  • 1
  • 7
A_K
  • 731
  • 3
  • 15
  • 40
  • Does this answer your question? [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – tacoshy Oct 31 '21 at 03:46

1 Answers1

0

you can resize the font size on the mobile device with a media query. and fit the title according to your needs.

@media only screen and (max-width: 600px) {
  .title-font-size{
    font-size:12px;
  }
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
freelanceing mindset
  • 172
  • 1
  • 10