skizhom Posts - Answer Overflow

skizhom

•Created by skizhom on 12/27/2024 in #front-end

My webpage isn't responding to some of the properties I have set in my CSS file

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>kokoro</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    
    <header>
        <h1>KOKORO</h1>
    </header>
    
    <div class="col-card">
        <div class="card" id="one">
            <img src="imgs/blame!.jpg" id="one-b" alt="Placeholder Image">
        </div>
        <div class="card">
            <img src="imgs/claude-monet(2).jpg" alt="Placeholder Image">
        </div>
        <div class="card">
            <img src="imgs/claude-monet(4).jpg" alt="Placeholder Image">
        </div>
        <div class="card">
            <img src="imgs/claude-monet(5).jpg" alt="Placeholder Image">
        </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>kokoro</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    
    <header>
        <h1>KOKORO</h1>
    </header>
    
    <div class="col-card">
        <div class="card" id="one">
            <img src="imgs/blame!.jpg" id="one-b" alt="Placeholder Image">
        </div>
        <div class="card">
            <img src="imgs/claude-monet(2).jpg" alt="Placeholder Image">
        </div>
        <div class="card">
            <img src="imgs/claude-monet(4).jpg" alt="Placeholder Image">
        </div>
        <div class="card">
            <img src="imgs/claude-monet(5).jpg" alt="Placeholder Image">
        </div>
    </div>
  </body>
</html>

html {
    text-align: center;
}


.card {
    margin: 3em;
}

.explorer {
    display: flex;

    margin: 0;
    padding: 0;
}

.col-card {
    display: flex;
    flex-basis: 50%;
    gap: 4 em;
    flex-direction: column;
}

header {
    position: sticky;
    z-index: 10;
    width: 100%;
}

.one-b {
    width: 10%;
}

html {
    text-align: center;
}


.card {
    margin: 3em;
}

.explorer {
    display: flex;

    margin: 0;
    padding: 0;
}

.col-card {
    display: flex;
    flex-basis: 50%;
    gap: 4 em;
    flex-direction: column;
}

header {
    position: sticky;
    z-index: 10;
    width: 100%;
}

.one-b {
    width: 10%;
}

when i gave the property of position as fixed it worked but it's not working for the value sticky

30 replies

Gaming

Programming