I am new to Python and taking a Django course online from Dave Gray. In the course we create CSS for Nav feature.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: black;
color: whitesmoke;
font-size: 3rem;
display: flex;
flex-flow: column;
}
nav {
padding: 1rem;
background-color: #44B78B;
color: white;
font-size: 2.5rem;
}
main {
flex-grow: 1;
display: grid;
place-content: center;
}
h1,
p {
text-align: center;
}
a {
text-decoration: none;
color: #81dbb8;
}
a:hover {
opacity: .85;
}
My Layout HTML is:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block title %}
Django App
{% endblock %}
</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/main.js' %}" defer></script>
</head>
<body>
<nav>
<a href="/">????</a> |
<a href="/about">????</a> |
<a href="/posts">????</a>
</nav>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
My Home Page HTML is:
{% extends 'layout.html' %}
{% block title %}
Home
{% endblock %}
{% block content %}
<h1>Home</h1>
<p>Check out my <a href="/about">About</a> page.</p>
{% endblock %}
I normally use Chrome and it did not look like his example. After reviewing the CSS I opened the page in Edge and the page looks perfect, just like in his video. On Chrome it is ignoring some of the CSS. How can I make my pages Chrome Friendly?
Here are 2 screenshots the First one is how it should look and the second is how it looks in Chrome.
Edge Image
Chrome Image
New contributor
Corey Wilson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.