PiggyPig

Вопрос решился после выполнения следующих пунктов:
1) Переход на https-протокол
2) Замена во вьюшке переменной EMAIL_HOST_USER во всех местах на строковое значение
3) Замена в settings.py пароля почты на пароль приложения (в случае включенной двухэтапной аутентификации)

В конце концов нашелся ответ. Выше представленный элемент шаблона преобразовал в такой вид:

{% for article_page in article_pages %}
    ...
    <a href="{% url 'articles' article_page.categories.first.slug article_page.slug %}">
    ...
{% endfor %}

Пробуйте:

https://jsfiddle.net/zagnLh1y/1/

Задайте padding по бокам секции.

Пробуйте, надеюсь, правильно понял.

https://jsfiddle.net/gn15ufmb/8/

Или другая версия:

https://jsfiddle.net/gn15ufmb/7/

Примерно как-то так:

https://jsfiddle.net/37f6g2ho/2/

В примере уменьшайте ширину (именно ширину) окна результата.

Останется только поиграться со значениями процентов для отступов, чтобы попасть в вершины. Если нужно пропорционально уменьшать размеры точек, то поиграйтесь и с процентами их ширины и высоты.
Зная ширину и высоту фоновой картинки, делите ширину на высоту - получаете соотношение, и потом, задав произвольное значение ширины точки, умножаете на соотношение и получаете нужную высоту и, соответственно, ровный круг :)

Немного заморочно, зато математику вспомните)

Родителю (в данном случае <div class="crowns">) задать следующее:

display: flex; 
align-items: center;

+ font-size должен иметь измеряемую величину (%, px, em, rem и т.д.).
+ не используйте height: 100%, если у родителя не задана фиксированная высота, т.к. это не имеет смысла.

Минимальная и максимальная ширина экрана у девайса.
Если использовать,например, медиа-запрос с min-width: 920px, то стили в этом запросе применятся только для экранов с шириной от 920px и больше.
У Вас же сейчас будет работать только при ширине 920px ровно, т.к. ограничили с двух сторон.

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
    <!-- Бликовая картинка -->
    <img src="img/reflect_light.png" class="reflect_light">
    <!-- Обычная картинка -->
    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
        <div class="mini_post_text">
            Italy<br>
            <span class="mini_post_price">from $1,050</span>
        </div>
</div>

.mini_post {
    position: relative;
}

.reflect_light {
    position: absolute;
}

Попробуйте задать div'у line-height: 0 и увидите, что лишняя область пропала. При увеличении значения увеличивается и отступ в блоке.
А вообще задайте изображению display: block, тогда родительский блок примет его высоту.

Большое спасибо за отзывчивость и помощь! Проблема оказалась в имени компьютера. Изначально изменял по глупости имя папки, содержащей локальные диски, в результате чего получил фигу.
Если у кого-то такая же проблема возникнет смотрите на имя, которое в панели управления в системе указано. Скорее всего (как вышло у меня) будет к имени пользователя приписано "-ПК", что и выдавало ошибку с кодировкой.