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.
In chrome you could try to clear your cache.
In the top right corner press the ellipses
-> Settings
-> Search for cache
-> clear browsing data now
-> change the filter to all time and clear
Once you clear the cache, refresh the page and your css should work