the div width and display properties won't change in the browser

wannabedev 0
Viewed 28

I'm having a problem with the channeliconcontainer div as you can see in the code display is inline-block and width is 40px but no matter what i do it won't change in the browser this is a screen shot from the dev tool

.outer {
  width: 400px;
}

.videoimg {
  width: 400px;
}

.verified {
  width: 25px;
}

.channelicon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
}

.descriptin {
  display: inline-block;
}

.channelicon-container {
  display: inline-block;
  width: 40px;
}
<div class="outer">
  <img class="videoimg" src="https://i.ytimg.com/vi/wccU6GIj1UQ/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLCtKAKRiMZqtzvtmLgJv0gtL30BKA" alt="">
  <div class="info">
    <div class="channelicon-container">
      <img class="channelicon" src="https://i.ytimg.com/vi/wccU6GIj1UQ/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLCtKAKRiMZqtzvtmLgJv0gtL30BKA" alt="">
    </div>
    <div class="description">
      <p class="title">
        Chill Drive - Lofi hip hop mix ~ Stress Relief, Chill Mood</p>
      <p class="channelname">chili music</p>
      <img class="verified" src="https://www.seekpng.com/png/detail/132-1323946_features-overview-youtube-verified-check-mark-png.png" alt="">
      <p class="views">421 k vues &#xb7; il y a 6 mois</p>
    </div>
  </div>
</div>

css html
1 Answers

if you want to change the icon then you give style to channelicon class, not channelicon-container , because you give style width and height to channelicon class

.outer {
  width: 400px;
}

.videoimg {
  width: 400px;
}

.verified {
  width: 25px;
}

.channelicon {
  width: 40px;  /* you can give style here */
  height: 40px; 
  border-radius: 50%;
  display: inline-block;
}

.descriptin {
  display: inline-block;
}

.channelicon-container {
  display: inline-block;
  width: 40px;
}
<div class="outer">
  <img class="videoimg" src="https://i.ytimg.com/vi/wccU6GIj1UQ/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLCtKAKRiMZqtzvtmLgJv0gtL30BKA" alt="">
  <div class="info">
    <div class="channelicon-container">
      <img class="channelicon" src="https://i.ytimg.com/vi/wccU6GIj1UQ/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLCtKAKRiMZqtzvtmLgJv0gtL30BKA" alt="">
    </div>
    <div class="description">
      <p class="title">
        Chill Drive - Lofi hip hop mix ~ Stress Relief, Chill Mood</p>
      <p class="channelname">chili music</p>
      <img class="verified" src="https://www.seekpng.com/png/detail/132-1323946_features-overview-youtube-verified-check-mark-png.png" alt="">
      <p class="views">421 k vues &#xb7; il y a 6 mois</p>
    </div>
  </div>
</div>

arsyaadi0
Related