Changing the font-size or font-weight on a button elements does nothing (may be result of removing the dot from noting custom classes in CSS)

[igamer609]

(note: this may be cause by the removal of dots before noting custom classes in CSS, so the program was taking the "button" not as all the tags, but as a custom class. Idk if that can be fixed, womp womp)

So im trying to make a little header for my site (to put on all my pages)

(sorry in advanced for weird code formatting idk how to fix it)

this is the html: (its a div with class "header")

ITeam

Members

Contact

Order a product

(ignore the other stuff, only the button matters)

and css:

header { direction: row; align-items: center;

gap: 30;

background-color: #111111;

padding: 30px;

border-radius: 10px;

}

button { margin: 20px; width: 70px; height: 40px;

font-size: 14px;
font-weight: 600;

}

(yes i tried to use width and height on buttons but its just expermental it does nothing)

Well, as you can see, the text on the button DOES NOT scale up, and also the weight stays the same. Am i doing something wrong in the code? Is this just not supported? If not, then why

Fix this, or if there is a fix, PLS TELL ME!! i beg you

ok thanks in advanced!!

[Not-Alaska-Airlines]

While I can't see anything wrong, code syntax might be wrong, so try double-checking that.

[igamer609]

While I can't see anything wrong, code syntax might be wrong, so try double-checking that.

no... whatever i try, it doesn't work. I think its just impossible to resize the text on a button lmao

[Not-Alaska-Airlines]

While I can't see anything wrong, code syntax might be wrong, so try double-checking that.

no... whatever i try, it doesn't work. I think its just impossible to resize the text on a button lmao

Maybe you could try formatting a link (the a element). I'm not sure.

[GStudiosX2]

Use class instead of ids. IDs aren't supported

[igamer609]

Use class instead of ids. IDs aren't supported

... the id is not in use, the CSS tag is on all buttons on the page. It doesn't work. Font size and wight just don't work for me for some reason (maybe because i compiled it myself something happened)

[GStudiosX2]

Use class instead of ids. IDs aren't supported

... the id is not in use, the CSS tag is on all buttons on the page. It doesn't work. Font size and wight just don't work for me for some reason (maybe because i compiled it myself something happened)

Did you try using a class instead I think it works for me

[igamer609]

Use class instead of ids. IDs aren't supported

... the id is not in use, the CSS tag is on all buttons on the page. It doesn't work. Font size and wight just don't work for me for some reason (maybe because i compiled it myself something happened)

Did you try using a class instead I think it works for me

hm alright ill try it, if it works i will do some unspeakable things

[i-am-JJ]

The issue you're experiencing is likely due to a missing unit in your CSS. In your CSS, you've set the gap property to 30, but you need to specify a unit such as px (pixels) or em (relative to the font-size of the element).

Regarding the button text not scaling up, it's because you've set a fixed font-size and width for the button. If you want the text to scale up when the button size changes, you should remove the fixed font-size and width properties from the button style.

Here's the corrected CSS:

header {
  display: flex; /* Use flex instead of direction: row; */
  align-items: center;
  gap: 30px; /* Added px unit */
  background-color: #111111;
  padding: 30px;
  border-radius: 10px;
}

button {
  margin: 20px;
  /* Removed fixed width and height */
  font-weight: 600;
}

With these changes, the button text should scale up when the button size changes, and the gap between header elements will be 30 pixels.

[igamer609]

Well, if you assign the button a custom tag <button class="custom_button">example</button> and then you change the parameters in the css for custom_button {}, it works! But button tag needs some love cause it's in depression rn