Kevin Powell - Community•2w ago

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

20 Replies

13eck•2w ago

What behaviour are you expecting? What behaviour are you getting? "It's not working" doesn't tell us anything

ProdJuan•2w ago

sticky also needs to know which edge to have a size on it. e.g. top:0px;

skizhomOP•2w ago

i wanted the h1 tag to stay in the top of the page even when i scroll down, that's what happen when we used fixed right?

ProdJuan•2w ago

yes, fixed will pin the element to a set position on the page no matter the scroll degree. sticky can produce a similar effect once you properly configure/set the CSS properties on it.

skizhomOP•2w ago

this might be the issue let me check it's working now

ProdJuan•2w ago

great, please mark this 'question' as 'SOLVED' (when you can)

skizhomOP•2w ago

i also tried to change the width of image and it wasn't working so I thought there was some other big issue messing the whole thing up I'll do it, also can i dm you for another general question I have

13eck•2w ago

If you have another question please make a new post. Don’t randomly DM server members

ProdJuan•2w ago

there is a prime use-case for position:sticky, more for elements that are initially lower on the page before scrolling, then rises only as far up as, say, the top edge of the page, then parks there remaining in view as the page continues to scroll down.

skizhomOP•2w ago

I wouldn't randomly send them dms. I was asking permission first, but I'll try to do what you said tho from now on

ProdJuan•2w ago

it benefits the group when you share your questions as posts so others may review and get support for an already covered topic. (that's the point of having shared question posts)

skizhomOP•2w ago

I feel like burdening others when I ask some questions, like I'm asking something dumb

13eck•2w ago

If you have a question, you make a post. That way: * Others who have the same issue later can learn from it * Those who can help will, when they can * You're allowing everyone in the server the chance to help, and not rely on only one person (who might not even be in the same timezone as you) The only dumb question is the unasked question And you're not a burden. We've all been new to something and had to ask for help. Most of us are here to either learn from others, pass on our knowledge, or both

skizhomOP•2w ago

nice, thanks for the help and supportive words @13eck @ProdJuan

13eck•2w ago

Heck, one of the reasons I don’t ask many questions is that over the past (almost) decade I’ve learned how to search and read MDN. It’s an acquired skill that you’ll learn

skizhomOP•2w ago

oh nice, so that's one thing I should learn I'll keep this in mind. Looks like a useful skill

13eck•2w ago

Almost all front-end stuff can be found there. It’s like The Docs™️ of HTML, CSS, and JS

skizhomOP•2w ago

I see, I thought they were limited and might not have some edge cases. also I'm at the starting stage and I have no idea what's wrong, so I think after I learn things a bit I'll be able to use MDN and figure out my doubts

ProdJuan•2w ago

MDN -> https://developer.mozilla.org/en-US/docs/Web/CSS (the CSS focused content but they have several other topics) as @13eck just explained, we all started somewhere, and learning how to leverage the 'search' features for both this server and the MDN and other resources can streamline both the learning process and the development effort.

skizhomOP•2w ago

thanks for the link thanks I'll ask my questions in the server then

Gaming

Programming

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

Did you find this page helpful?