css styles aren't applied on classes

September 17, 2022

I’m trying to create a social card (similar to Facebook). I don’t know why I can’t modify my classes inside CSS, but when I style them directly they work.

.card {
  display: inline-block;
  width: 600px;
  height: 145px;
}

.image-section {
  width: 130px;
  display: inline-block;
}

.image {
  width: 90px;
  vertical-align: middle;
  border-radius: 90px;
}

.name {
  font-size: 55px;
}

<div class=”card”>
  <div class=”image-section”>
    <img class=”image” src="images/photo.png">
  </div>
  <div class=”info-section”>
    <p class=”name”>Roland</p>
    <p class=”tag”>@roland00</p>
    <p class=”gender”>Male</p>
  </div>
  <div class=”button-section”>
    <button class=”btn” type=”button”>Follow</button>
  </div>
</div>

>Solution :

Now its applying you have mistake in your double inverted comma.

.card {
  display: inline-block;
  width: 600px;
  height: 145px;
}

.image-section {
  width: 130px;
  display: inline-block;
}

.image {
  width: 90px;
  vertical-align: middle;
  border-radius: 90px;
}

.name {
  font-size: 55px;
}

<div class="card">
  <div class="image-section">
    <img class="image" src="images/photo.png">
  </div>
  <div class="info-section">
    <p class="name">Roland</p>
    <p class="tag">@roland00</p>
    <p class="gender">Male</p>
  </div>
  <div class="button-section">
    <button class="btn" type="button">Follow</button>
  </div>
</div>