index.html
{% extends 'main/base.html' %}
{% load static %}
{% block title %}
{{title}}
{% endblock %}
{% block content %}
<link rel = 'stylesheet' href="{% static "main/css/index.css" %}">
<body>
<div class="grid-wrapper">
<header class="grid-header">
<img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
<p>Предоставим качественное образование, <br>
поможем понять школьную программу, <br>
улучшить оценки и <br>
подготовиться к экзаменам</p>
</header>
</div>
</body>
{% endblock %}
index.css
.grid-wrapper {
display: grid;
grid-template-columns: 1 fr;
grid-template-rows: 1 fr;
grid-template-areas: 'header header';
}
.circles {
display: block;
margin-left: auto;
margin-right: auto;
}
header {
position: relative;
width: 100%;
}
p {
color: red;
text-align: center;
position: absolute;
width: 100%;
text-align: center;
}
Other tags in index.css are functioning correctly. When I replicated the code in a separate file without using Django, it worked flawlessly.
I attempted styling with .grid-header p, header p, and .grid-wrapper p, but none of these options resolved the issue.
I also experimented with the positioning of the text over the image using <p>.