My code is not working correctly, and I'm struggling to identify the errors. The website I'm working on has subpages, but the responsive design doesn't seem to be functioning properly. Could this issue be related to mistakes in my HTML/CSS code, or should I consider using a different approach for making it responsive in Bootstrap? Specifically, I've been having trouble with adjusting margins and font sizes responsively within rows and columns. Is it possible that this issue is somehow connected to Django's inheritance mechanism?
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeN$
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3$
<link rel="stylesheet" type="text/css" href=relax/css/grid.css">
<title>Visyrelax</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #F8F8FF;
} /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.row{
margin:100px;
}
@media (min-width: 576px) {
@include media-breakpoint-up(sm)
.row{
font-size:10px;
margin:10px;
}
}
@media (min-width: 768px){
@include media-breakpoint-up(sm)
.row{
font-size:20px;
margin:10%;
}
}
@media (min-width: 1200px){
@include media-breakpoint-up(sm)
.row{font-size:60px;}
p{
font-size:25px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href ="{% url 'index'%}"> <p style="font-size:40px;"> <font color=DodgerBlue> Visy</font><font color$
<div class="navbar">
<a class= "nav-item nav-link" href ="{% url ‘a’%}”><font color=white>a</font></a>
<a class= "nav-item nav-link" href ="{% url ‘b’%}”><font color=white>b</font></a>
<a class= "nav-item nav-link" href ="{% url 'tc’%}”> <font color=white>c</font></a>
<a class= "nav-item nav-link" href ="{% url ‘d’%}” ><font color=white>d</font></a>
<a class= "nav-item nav-link" href ="{% url ‘e’ %}"><font color=white>e</font></a>
</div>
</nav>
{%block body%}
{%endblock %}
</body>
</html>
….
{% extends 'relax/base.html' %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale =1.0">
<style>
</style>
</head>
<body>
{%block body%}
<br> <br><br>
<p> <center> <font size="40"> <b>title </b> </font> </center> <p> <br> <br>
<br> <h1> <p> <center> <b> subtitle </b> <center> <br><br> </h1>
<div class="row">
<div class="col-md-5">
<img src= "/media/Lesson1image.png" width="500" height="630" style="width:100%;" class="self"/> <br>
</div>
<div class="col-md-7">
<br> <br>
<p class="soft"> text
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h1> <p> <b> title</b> <br><br> </h1>
<h4>
<b>text</b>: text <br><br>
<a href ="{% url ‘a’ %}">Learn more</a> <br><br>
<b>text</b>: text.<br><br>
<a href ="{% url ‘b’ %}">Learn more</a><br><br>
</h4>
</div>
<div class="col-md-7">
<h1><p> <b> title </b> <br><br><h1>
<h4> <b> text</b>: atext <br><br>
<a href ="{% url ‘e %}">Learn more</a></h4> <br>
<br> <img src= "/media/composition.png" width="800" height="400" style="width:100%;" > <br>
</div>
</div>
</div>
{%endblock %}
</body>
</html>