I'm working on a project and during it I had to use :root to set the font size. However I also need to override it in the next section and I can't seem to do it.
I used the root from the online template here.
However in the main section I failed to reset the html font size to 16px. This is my code:
layout.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="{% static 'cs50gram/styles.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
{% block style %}{% endblock %}
{% block script %}{% endblock %}
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" id="nav-background">
<a class="navbar-brand" id="nav-brand" href="{% url 'index' %}">CS50gram</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
{% if user.is_authenticated %}
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'index' %}">Home </a>
<a class="nav-item nav-link" href="{% url 'explore' %}">Explore</a>
<a class="nav-item nav-link" href="{% url 'profile' request.user %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'add-post' %}">Add Post</a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
</div>
{% endif %}
</div>
</nav>
<div id="body">
{% block body %}
{% endblock %}
</div>
<!-- Bootstrap 4 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The main page where I want to reset the font-size in <main>:
{% extends 'cs50gram/layout.html' %}
{% load static %}
{% block title %}
Profile
{% endblock %}
{% block body %}
<header>
<div class="container">
<div class="profile">
<div class="profile-image">
<img src="https://pbs.twimg.com/profile_images/1313117763519606784/IkM0WYGt_400x400.jpg" alt="Profile Picture" width="150px">
</div>
<div class="profile-user-settings">
<h1 class="profile-user-name">{{ profile.user.username }}</h1>
{% if user.is_authenticated and request.user.username == profile.user.username %}
<button class="btn profile-edit-btn">Edit Profile</button>
{% elif user.is_authenticated and request.user.username != profile.user %}
<button class="btn profile-edit-btn">Follow</button>
{% endif %}
<!-- button class="btn profile-settings-btn" aria-label="profile settings"><i class="fas fa-cog" aria-hidden="true"></i></button -->
</div>
<div class="profile-stats">
<ul>
<li><span class="profile-stat-count">{{ profile.user.posts.count }}</span> posts</li>
<li><span class="profile-stat-count">188</span> followers</li>
<li><span class="profile-stat-count">{{ profile.followings.count }}</span> following</li>
</ul>
</div>
<div class="profile-bio">
<hr>
<h2 class="profile-real-name">{{ profile.user.first_name }} {{ profile.user.last_name }}</h2>
<hr>
<p> <b> Date Joined:</b> {{ profile.user.date_joined|date:"D d M Y" }}
{% if profile.birthdate %}
<span style="margin-left: 10px"> <b> BirthDate: </b> {{ profile.birthdate }}</span></p>
{% endif %}
{% if profile.gender %}
<p> <b> Gender: </b> {{ profile.gender }}</p>
{% endif %}
<hr>
{% if profile.bio %}
<p> {{ profile.bio }}</p>
{% endif %}
</div>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main> <!-- Here I want to restore font-size to 16px -->
<div class="container">
{% for post in profile.user.posts.all %}
<div class="row justify-content-center mt-3">
<div class="col-md-6" style="background-color: #f4f6f6">
<!-- Username -->
<a href="{% url 'profile' post.posted_by %}"><h5 class="mt-2"> @{{ post.posted_by }} </h5></a>
<!-- Post image -->
<img src="{{ post.image.url }}" class="img-fluid" width="550px">
<!-- Like Icon and Counter -->
<img data-id="{{post.id}}" id="post-like-{{post.id}}" class="liked"
{% if request.user in post.like.all %}
data-is_liked="yes"
src="https://img.icons8.com/ios-filled/32/fa314a/hearts.png"
{% else %}
data-is_liked="no"
src="https://img.icons8.com/windows/32/000000/like--v2.png"
{% endif %}
/> <span id="like-counter-{{post.id}}"> {{ post.like.count }} </span>
<!-- Comment icon and counter -->
<span class="comment-pointer" data-id="{{post.id}}" id="view-comments" data-toggle="modal" data-target="#exampleModalCenter">
<img src="https://img.icons8.com/windows/32/000000/speech-bubble--v1.png" class="comment-icon" /> <span id="comment-counter-{{post.id}}"> {{ post.comments.all.count }} </span>
</span>
<!-- Caption -->
{% if post.caption %}
<h5 class="mt-2"><strong>{{ post.posted_by }}</strong> {{ post.caption }}</h5>
{% endif %}
<!-- Date Posted -->
<h6 class="gray">Posted on {{ post.date_posted }}</h6>
<!-- Add Comment -->
<div class="input-group mb-3">
<input type="text" placeholder="Add Comment" id="post-comment-{{post.id}}" class="form-control mr-1">
<button class="btn btn-outline-dark comment" data-id="{{post.id}}" type="button">Add Comment</button>
</div>
<!-- Show comments -->
{% if post.comments.all %}
<!-- Gets the comments of each post based on the related_name -->
{% for comment in post.comments.all.reverse|slice:":2" %}
<div>
<a href="{% url 'profile' comment.commented_by %}"><b> {{ comment.commented_by }} </b></a>
<span class="gray"> {{ comment.comment }} </span>
</div>
{% endfor %}
<!-- Div to show recently added comment -->
<div id="recent_comment"></div>
<div class="text-center mb-2 view-all">
<a data-toggle="modal" data-id="{{post.id}}" id="view-comments" data-target="#exampleModalCenter">View all comments...</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</main>
{% endblock %}
{% block style %}
<link href="{% static 'cs50gram/profile.css' %}" rel="stylesheet">
{% endblock %}
Please note that the profile.css is taken from the link provided above.