How to remove images and just place colors in place of the images

byMR

December 3, 2022

Instead of images, I want to place colors in those spots.

https://jsfiddle.net/rza8v51x/

The images are set in a grid layout, and I want to remove them and add colors.

In place of the images I want to add colors in those spots.

That is all I am trying to do in the code.

Replace the images with colors.

How would this be done?

.channel-browser__channels {
    border-top: 1px solid rgba(86,95,115,0.5);
    padding-top: 14px;
    margin-top: 24px;
}

.channel-browser__channel-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.channel-browser__channel-grid-item {
    position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item{
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #1a1a1a;
    background-color:red;
    -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.channel-browser__channels {
    border-top: 1px solid rgba(86,95,115,0.5);
    padding-top: 14px;
    margin-top: 24px;
}

.channel-browser__channel-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.channel-browser__channel-grid-item {
    position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item{
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #1a1a1a;
    background-color:red;
    -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);

}

<div class="channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>


  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">


    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">


    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">


    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

</div>

>Solution :

Delete the entire img tag in between the div tags, and either add a class as I did in the div tags "box-color-red" or what ever you desire to call the class, and style the background: toWhateverColorYouWant; || OR you can delete the text inside the div class and just create your own if you do not need all of those classes that are declared inside of your div classes. Otherwise, keep them, and appropriately name a new class that will style the color of the div, and make sure the spacing inside the class name is space correctly as well.

.channel-browser__channels {
    border-top: 1px solid rgba(86,95,115,0.5);
    padding-top: 14px;
    margin-top: 24px;
}

.channel-browser__channel-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.channel-browser__channel-grid-item {
    position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item{
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #1a1a1a;
    background-color:red;
    -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);

}

.box-color-red {
      background: red;
      }
      
.box-color-blue {
      background: blue;
      }
 .box-color-yellow {
      background: yellow;
      }
 .box-color-green {
      background: green;
      }

<div class="channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-red">
    </div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-blue">

   </div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-yellow">

    </div>


  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-green">

    </div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">


    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">


    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">


    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

</div>