Search code examples
htmlcssdjangogoogle-chromemicrosoft-edge

How do I get my CSS to function in Chrome?

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

Solution

  • 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