why wont my link center?
I made the navbar centered, and i copied and modified the code to fit more with the button type and now it is stuck to the side.🔥
32 Replies
thats what the webpage looks like
use
instead of
instead of
display: inline-block; in .clickText class
also, I don't think you'd need another display property in .grow class as the display property was already defined in the .clickText classyeah i removed the clicktext class
it didnt do anything
if you removed that class, then the
display property in the .grow class should have the value of blockok
hang on
also,
justify-content doesn't work unless the display is set as flex or grid. I think, vertical-align property is not needed too, as it doesn't really align it verticallythat worked, but now i have an issue. when i remove the grow class from the link, it has a normal button, but if i add the grow class, it makes it stretch farrrrrr
made the transform scale 0.5 and this is what i see
@nickymicky
can you please share a codepen link for the code? I'd like to try it myself and see what's causing the issue
sure
will it accept 2 html
just put the necessary code in one html file
okay, let me check and I'll come back once I figure out the issue
alright. im going to add some spacing between the join button and the bottom of the vp soon
alright
I think, I'm getting close the root cause of the issue, but before that I have one suggestion, which is, please try to never use
vh or vw units for sizing or anything else, they're not good for those things, instead, use rem.
vh and vw units cause unexpected behaviour since there are devices with various widths and heightsFor example, take a look at this, the buttons are so small even though the width of the screen is 1920px
and look at the padding of the buttons, which depend on
vwFinally, figured it out the solution with a little bit of searching😁
we just need to put
text-align:center; to the parent element, instead of setting it to each child element.
Also, like I said before, please stop using vh and vw units, because just for this small problem, I had to struggle a lot to debug the problem as the layout changes caused drastic changes in sizes of the elements, which was very hard to read or click
but vh or vw could be great for responsive font-sizes, when used with clamp()so what do i change to get to the button being in the center?
so how would i get it to scale for mobile?
just create a class for the parent element and put
text-align:center; in that and remove everything which is commented in the above pic I've sent youjust create a class for the parent element and put text-align:center; in thathow?
i'd say, start with mobile-first design and then gradually change things as device sizes change. You don't need to change for every device, but use common device-size ranges, which are available all over the internet.
create a class (e.g. hero, main, wrapper, etc) for the parent
div which contains the h1 and the a elements, and put the text-align property for that class inside the css filelike that?
AH!
It works! thank you!
although when it expands, it has the overflow
yes
you're welcome!😁
you have to increase the padding on the left and right, when it enlarges
you could've also tried using margin-left: auto; and margin-right: auto 🙂
I've already tried that, but it didn't work for me for some reason, that's why I didn't provide that as a solution