Как убрать точки которые появились? HTML CSS

Question

В футере страницы выводится информация о социальных сетях, при работе с кодом появились точки на картинках которые я не могу убрать. Как это можно исправить?

Пример вывода ниже:

.single-footer-widget p {
  margin-bottom: 0px;
  color: #777777;
  max-width: 235px;
}

.single-footer-widget ul li a {
  line-height: 25px;
  display: inline-block;
  color: #777;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  margin-bottom: 13px;
}

.single-footer-widget ul li a:hover {
  color: #6f6fff;
}

.single-footer-widget .instafeed {
  margin-left: -30px;
  margin-right: -30px;
}

.single-footer-widget .instafeed li {
  margin: 1px;
}

<div class="col-lg-3 col-md-6 col-sm-6">
  <div class="single-footer-widget instafeed">
    <h6 class="footer_title">Instagram</h6>
    <ul class="list instafeed d-flex flex-wrap">
      <li><img src="{% static 'img/instagram/Image-01.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-02.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-03.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-04.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-05.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-06.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-07.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-08.jpg' %}" alt=""></li>
    </ul>
  </div>
</div>

Answer 1

Добавить list-style: none; для элементов списка

.single-footer-widget p {
  margin-bottom: 0px;
  color: #777777;
  max-width: 235px;
}

.single-footer-widget ul li a {
  line-height: 25px;
  display: inline-block;
  color: #777;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  margin-bottom: 13px;
}

.single-footer-widget ul li a:hover {
  color: #6f6fff;
}

.single-footer-widget .instafeed {
  margin-left: -30px;
  margin-right: -30px;
}

.single-footer-widget .instafeed li {
  margin: 1px;
  list-style: none; // <-- добавить это
}

<div class="col-lg-3 col-md-6 col-sm-6">
  <div class="single-footer-widget instafeed">
    <h6 class="footer_title">Instagram</h6>
    <ul class="list instafeed d-flex flex-wrap">
      <li><img src="{% static 'img/instagram/Image-01.jpg' %}" alt="image1"></li>
      <li><img src="{% static 'img/instagram/Image-02.jpg' %}" alt="image2"></li>
      <li><img src="{% static 'img/instagram/Image-03.jpg' %}" alt="image3"></li>
      <li><img src="{% static 'img/instagram/Image-04.jpg' %}" alt="image4"></li>
      <li><img src="{% static 'img/instagram/Image-05.jpg' %}" alt="image5"></li>
      <li><img src="{% static 'img/instagram/Image-06.jpg' %}" alt="image6"></li>
      <li><img src="{% static 'img/instagram/Image-07.jpg' %}" alt="image7"></li>
      <li><img src="{% static 'img/instagram/Image-08.jpg' %}" alt="image8"></li>
    </ul>
  </div>
</div>

Answer 2

Для избежание повторения строки кода можете сделать так:

* { list-style: none; }

Или:

ol, ul { list-style: none; }

БЛОГ НА HUSL

Как убрать точки которые появились? HTML CSS

Ответы (2 шт):