[SOLVED] Card showing underneath header when page loads on phone (CSS)

Card showing underneath header when page loads on phone (CSS)

I'm designing a website, and want the div named card to load underneath the header when loading the website on mobile devices, but when I lower the card's position on the page, it applies the same repositioning on the desktop version as well. This is using the Django framework as well if that would be helpful.

How the page looks on desktop:

How the page looks on mobile view:

This is the code I'm using:

body {
    padding-top: 10px;
}



.header {
    font-family: Dubai;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    padding-left: 3.5%;
    display: flex;
    background: linear-gradient(to right, #000000 280px, #808080 280px);
    z-index: 2;
}


    .header ul {
        list-style-type: none;
        margin-right: 7%;
        overflow: hidden;
        margin-left: 5%;
    }

    .header li {
        float: right;
        font-size: 100%;
    }

        .header li a {
            color: white;
            display: block;
            padding: 8px 16px;
            text-decoration: none;
        }


            .header li a:hover {
                background-color: #575757;
            }

    .header img {
        width: 140px;
        height: 60px;
        margin-top: 7px;
    }

#banner {
    background-image: url('../../static/mainbanner.jpg');
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 70px;
    position: static;
}

.background-image {
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    min-height: 100%;
}


#card {
    margin-top: 100px;
    padding-top: 0.5%;
    padding-bottom: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

The HTML (base.html):

<!DOCTYPE html>
<html>

<head>


    <link rel="stylesheet" type="text/css" href="../../static/website/main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% if title %}
    <title>{{ title }}</title>
    {% else %}
    <title>Parrots4You - {{ Bird.breed }}</title>
    {% endif %}
</head>

<body>

    <div class="header">
        <a href="/welcome/"><img src="../../static/header.png"></a>
        <ul>
            <li><b><a class="nav-item nav-link" href="/rehome/">Rehome your Parrot</a></b></li>
            <li><b><a class="nav-item nav-link" href="/delivery/">Delivery Options</a></b></li>
            <li><b><a class="nav-item nav-link" href="/about/">About Us</a></b></li>
            <li><b><a class="nav-item nav-link" href="/">Parrots for Sale</a></b></li>
        </ul>
    </div>

</body>

</html>

{% include 'base.html' %}


<!DOCTYPE html>
<html>

<head>
    
</head>

<body>
    <img src="../../static/background.jpg" alt="Parrots4You" class="background-image">

    {% for bird in birds %}
    <div id="card">

        <img src="{{ bird.image.url }}" alt="{{ bird.breed }}">
        <box><left><p>Breed: {{ bird.breed }}</p></left></box>
        <p>Price: &pound{{ bird.price }}</p>
        <p>Gender: {{ bird.breed_sub_category }}</p>
        <p>Date of Birth: {{ bird.date_of_birth }}</p>
        <p>Description: {{ bird.description }}</p>
        <button onclick="location.href='{% url 'bird-detail' bird.id %}'" type="button">See Details</button>



    </div>
    {% endfor %}
</body>

</html>

Solution

That is the intended functionality in the css you have. What you would be missing is a media query telling the browser to only load the css at certain sizes. For example, if you want to add styling for all devices with width 640 and below you can add the code below and remove it from the general #card styling. Also note that styling of equal specificity overwrite those above it. So it would be best to add that below the original #card styling.

@media screen and (max-width:640px){
    #card{
        margin-top: 100px;
    }
}