Search Field Styling Not Working

For me this is working on your site:

header .search input { width: 240px; }

That’s so interesting that pixels work but percentages don’t? Is there a way to make percentages work?

A percentage also works for the element. Since percentages in CSS are always to be seen in relation to the surrounding element, this must also have a corresponding width. In your case the search field is in a flex element, so the width of the surrounding element is set automatically by the browser. If you specify 50% as the width for the input field, it will also only take up 50% of the width, but it won’t suddenly make it wider at 100%. So if you want the field to be wider, you must specify either a width value in pixels or a min-width value also in pixels.

By the way, this has nothing to do with WordPress but are CSS basics. Have a look at them here: https://developer.mozilla.org/en-US/docs/Web/CSS/width

I get what you’re saying. I know this isn’t a wordpress issue but I was wondering if the input field was being constrained by something in wordpress. The parent element, part of my grid, is set from grid line 10 to grid line 13. 100% doesn’t fill that allotted space. So the percentage value isn’t being recognized, but pixels are. So I’m still confused.

The parent element, part of my grid, is set from grid line 10 to grid line 13. 100% doesn’t fill that allotted space. So the percentage value isn’t being recognized, but pixels are. So I’m still confused.

As @threadi explained, the input needs a value for its immediate parent (which is the form element itself) to work the percentage on. Try:

header form.search-form, header .search input {
    width: 100%;
}

I think that worked, George. Thank you so much! I didn’t realize that targeting the form would have transpired to much. I appreciate it!!