32 Replies
if you inspect the site, you can see that it's a background image using a couple of gradients:
not getting the same effect hmm
change the background color to something darker, that's probably on the entire site somewhere
yup, there's
rgb(23, 25, 30) on the main tag
might have to set it on a parent tag
its making the navbar and hero section a little faded
before
is there any opacity on the navbar colors? If not, share the whole thing in a codepen if you can
this is all I see, along with the code:
like... we ask for codepen links because then you can see the code run and function like it does for you, so it's easier to figure out what is going on
you can use https://play.tailwindcss.com/ to share tailwind stuff easily, just like... share it in a way that is helpful for someone trying to help you. I need to see what's wrong in a live version, or all I'm doing is guessing.
as for guessing now, you have
text-gray-900 on your linksidk why the bg color isnt workin
in codepen
wait wait wait
are there any classes set on the body maybe? or other CSS included you didn't put in the CSS box?
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
its not fading like it should
no sir
yeah, you have
text-gray-900 on those nav links, that's making them that color
when you inspect an element, you can go to computed style, then expand the color and see where the color is coming fromit still aint working its related to mask-image
in css box
hm, yeah, I see what you mean. that's weird tbh
if you move the bg-grid class to
container it seems to work like it's supposed to though
hm, yeah, the mask-image property messes with the alpha channel for the element it's set on, so that was what was making the text a little transparent, which showed the background color through itmy heading is also faded
and the button
hm, if you look at the astro site where this is originally from, they're putting the background in an absolute div with
inset-0 on it instead of setting it on the div itself. Here's an updated playground link:
https://play.tailwindcss.com/orh96qgorTbro it worked you the fucking G
fuck
if i become rich one day i'll donate to you to keep it up ,no shit
is kevin paying you tho
all the mods are volunteers, and the helping isn't part of being a mod, I just like to solve problems 🙂
now the navbar isnt working due to
absolute
Try setting relative on the parent
already tried its making the grid disappear
add
pointer-events-none on that divthat worked thanks
do you know why it worked ?
im reading about it but i dont understand properly
you made that div cover whole screen w position: absolute; and inset: 0; so you can only interact with that div anything below is not clickable. By adding
pointer-events: none; we disable the ability to click/interact on that div so everything else becomes clickable again.
it would be better if you would learn css first then start using tailwind for it 😉adding
relative on the container tag works as well btw, it keeps the grid inside the container and not covering the nav at all
https://play.tailwindcss.com/db0ldbXZcZ
But yes, 100% this @joy2opyou could also increase z-index on that hamburger button
but pointer events will fix any future potential issues
hmm make sense
thanks both
right
yeet