CODEWITHSUNDEEP
htmlcss
Cole Perry
Cole Perry

Reputation: 170

Remove weird black box from html header

Work asked me to do some work on this older app that no one really manages anymore. One thing that the client had asked for was to remove this black dot in the top right of the header: enter image description here

Here is the code for that:

<div class="row">
  <div class="col-md-1" style="background-color: #F6861F"></div>
  <div class="col-md-1" style="background-color: #DD1372"></div>
  <div class="col-md-2" style="background-color: #41AD49"></div>
  <div class="col-md-2" style="background-color: #00AAC0"></div>
  <div class="col-md-2" style="background-color: #D32027"></div>
  <div class="col-md-2" style="background-color: #F49AC1"></div>
  <div class="col-md-1" style="background-color: #EBB700"></div>
  <div class="col-md-1" style="background-color: #00ADE4">&#9632;</div>
</div>

First of all, what even is this in the last col? &#9632; If I remove that the entire colored row there disappears all together. How can I get rid of that black dot? Is there not a cleaner way to do this in the first place?

Upvotes: 1

Views: 323

Answers (3)

Nensi Gondaliya
Nensi Gondaliya

Reputation: 77

try like this:

<div class="row">
  <div class="col-md-1" style="background-color: #F6861F"></div>
  <div class="col-md-1" style="background-color: #DD1372"></div>
  <div class="col-md-2" style="background-color: #41AD49"></div>
  <div class="col-md-2" style="background-color: #00AAC0"></div>
  <div class="col-md-2" style="background-color: #D32027"></div>
  <div class="col-md-2" style="background-color: #F49AC1"></div>
  <div class="col-md-1" style="background-color: #EBB700"></div>
  <div class="col-md-1" style="background-color: #00ADE4">&nbsp;</div>
</div>

Upvotes: 2

ChanHyeok-Im
ChanHyeok-Im

Reputation: 551

You can use &nbsp; instead of &#9632; or set height to col element.

  • Using &nbsp; 

    <div class="row">
  <div class="col-md-1" style="background-color: #F6861F"></div>
  <div class="col-md-1" style="background-color: #DD1372"></div>
  <div class="col-md-2" style="background-color: #41AD49"></div>
  <div class="col-md-2" style="background-color: #00AAC0"></div>
  <div class="col-md-2" style="background-color: #D32027"></div>
  <div class="col-md-2" style="background-color: #F49AC1"></div>
  <div class="col-md-1" style="background-color: #EBB700"></div>
  <div class="col-md-1" style="background-color: #00ADE4">&nbsp;</div>
</div>

  • Using height attribute

<div class="row">
  <div class="col-md-1" style="background-color: #F6861F" />
  <div class="col-md-1" style="background-color: #DD1372" />
  <div class="col-md-2" style="background-color: #41AD49" />
  <div class="col-md-2" style="background-color: #00AAC0" />
  <div class="col-md-2" style="background-color: #D32027" />
  <div class="col-md-2" style="background-color: #F49AC1" />
  <div class="col-md-1" style="background-color: #EBB700" />
  <div class="col-md-1" style="height: 20px; background-color: #00ADE4" />
</div>

Upvotes: 2

ethry
ethry

Reputation: 804

You are using the entity for this character: ■. As the text colour is black, it is showing a black box.

You can replace &#9632; with &nbsp;, which is a space. With your code, it would look like:

<div class="row">
  <div class="col-md-1" style="background-color: #F6861F"></div>
  <div class="col-md-1" style="background-color: #DD1372"></div>
  <div class="col-md-2" style="background-color: #41AD49"></div>
  <div class="col-md-2" style="background-color: #00AAC0"></div>
  <div class="col-md-2" style="background-color: #D32027"></div>
  <div class="col-md-2" style="background-color: #F49AC1"></div>
  <div class="col-md-1" style="background-color: #EBB700"></div>
  <div class="col-md-1" style="background-color: #00ADE4">&nbsp;</div>
</div>

Upvotes: 1

Related Questions