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.

GrayOP•1/5/23, 11:06 PM

thats what the webpage looks like

nickymicky•1/5/23, 11:41 PM

use

display: block;

display: block;

instead of

display: inline-block;

display: inline-block;

.clickText

.clickText

class

nickymicky•1/5/23, 11:43 PM

also, I don't think you'd need another display property in

.grow

.grow

class as the display property was already defined in the

.clickText

.clickText

class

GrayOP•1/5/23, 11:43 PM

yeah i removed the clicktext class

GrayOP•1/5/23, 11:43 PM

it didnt do anything

nickymicky•1/5/23, 11:44 PM

if you removed that class, then the

display

display

property in the

.grow

.grow

class should have the value of

block

block

GrayOP•1/5/23, 11:44 PM

hang on

nickymicky•1/5/23, 11:46 PM

also,

justify-content

justify-content

doesn't work unless the

display

display

is set as

flex

flex

grid

grid

. I think,

vertical-align

vertical-align

property is not needed too, as it doesn't really align it vertically

GrayOP•1/5/23, 11:55 PM

that 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

GrayOP•1/5/23, 11:57 PM

made the transform scale 0.5 and this is what i see

GrayOP•1/6/23, 12:10 AM

@nickymicky

nickymicky•1/6/23, 12:12 AM

can you please share a codepen link for the code? I'd like to try it myself and see what's causing the issue

GrayOP•1/6/23, 12:12 AM

sure

GrayOP•1/6/23, 12:13 AM

will it accept 2 html

nickymicky•1/6/23, 12:13 AM

just put the necessary code in one html file

GrayOP•1/6/23, 12:15 AM

https://codepen.io/GrayHay/pen/poZNPyR

GrayOP•1/6/23, 12:15 AM

here

nickymicky•1/6/23, 12:16 AM

okay, let me check and I'll come back once I figure out the issue

GrayOP•1/6/23, 12:17 AM

alright. im going to add some spacing between the join button and the bottom of the vp soon

nickymicky•1/6/23, 12:31 AM

alright

nickymicky•1/6/23, 12:33 AM

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

vh

vw

vw

units for sizing or anything else, they're not good for those things, instead, use

rem

rem

nickymicky•1/6/23, 12:34 AM

vh

vh

and

vw

vw

units cause unexpected behaviour since there are devices with various widths and heights

nickymicky•1/6/23, 12:36 AM

For example, take a look at this, the buttons are so small even though the width of the screen is 1920px

nickymicky•1/6/23, 12:37 AM

and look at the padding of the buttons, which depend on

vw

vw

nickymicky•1/6/23, 12:54 AM

Finally, figured it out the solution with a little bit of searching

nickymicky•1/6/23, 12:54 AM

we just need to put

text-align:center;

text-align:center;

to the parent element, instead of setting it to each child element.

nickymicky•1/6/23, 12:56 AM

Also, like I said before, please stop using

vh

vh

and

vw

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

nickymicky•1/6/23, 1:03 AM

but

vh

vh

vw

vw

could be great for responsive font-sizes, when used with

clamp()

clamp()

GrayOP•1/6/23, 1:07 AM

so what do i change to get to the button being in the center?

Nnickymicky Also, like I said before, please stop using `vh` and `vw` units, because just fo...

GrayOP•1/6/23, 1:19 AM

so how would i get it to scale for mobile?

GGray so what do i change to get to the button being in the center?

nickymicky•1/6/23, 1:21 AM

just create a class for the parent element and put

text-align:center;

text-align:center;

in that and remove everything which is commented in the above pic I've sent you

GrayOP•1/6/23, 1:24 AM

just create a class for the parent element and put text-align:center; in that

how?

GGray so how would i get it to scale for mobile?

nickymicky•1/6/23, 1:24 AM

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.

GGray > just create a class for the parent element and put text-align:center; in that ...

nickymicky•1/6/23, 1:27 AM

create a class (e.g. hero, main, wrapper, etc) for the parent