Why is my text gradient MOVING?

[niadaniels40]

I have NEVER encountered this I’M LITERALLY just copying and pasting from different sources and my own projects and its still moving. When I resize the browser or move the text to the center it looks different. I just want the gradient to go to the right and have a balanced gradient. Now there’s too much blush pink. How can I fix this, even the percentage isn’t working.https://codepen.io/lilliongoddess/pen/xxEmXVY

Resize it smaller and you’ll see more gray appear then it damn near vanishes when resizes back to desktop.

[Erik_J]

Try make the title class a span or display inline and see what happens.

[PaulOB]

The gradient stretches the whole width of your container but your text does not. Therefore when you resize the browser window the gradient changes but your text stays the same until it fills the container.

I suggest you make the gradient match the text size instead. You can do this by shrinkwrapping the title container with inline-flex;

e.g.

.title {
    font-family: "Laterlocks DEMO";
    font-size: 132px;
    background: -webkit-linear-gradient(45deg,#bf787c, #96A1A3 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  display:inline-flex;
}

If that’s not the issue you meant let me know and I’ll have another look.

[coothead]

Hi there niadaniels40,

I’ve made a couple of amendments to @PaulOB’s code…

Full Page View:-
https://codepen.io/coothead/full/yLaGERo

Editor View:-
https://codepen.io/coothead/pen/yLaGERo

coothead

[niadaniels40]

thank you thank you! Now, I keep getting errors I haven’t had in awhile and I simply don’t know why. Min-height:100vh or 100% isn’t working. I’ve tried stackoverflow solutions, made my own post and they aren’t being very helpful over there. I got one random sentence lol. https://codepen.io/lilliongoddess/pen/xxEmXVY?editors=1100

[Erik_J]

You forgot to reset the browser default body margins (usually 8px).

html, body {
    height: 100%;
    margin: 0; /* added */
}

Then you have a collapsing top-margin that pushes the container down, try padding instead.

.herogrid-container {
    max-width: 1250px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    padding-top: 180px; /* changed fro margin-top */
    gap: 50px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Otherwise I think you’re good!