0

I've tried everything I know how to get this input field to 100% but I can't seem to do it. It always stays at some stuck width. .search-field is the stock class and I've targeted that class using max-width: none; or width: 100%; and or input {width: 100%;} but it never changes. Has anyone else experienced this? If so, what was your solution, if any?

5
  • Have you used the Inspector to see the generated code? Perhaps there is a hardcoded style in that field. Use the inspector to also see the CSS class assigned to that element. Then you can use the appropriate CSS class name to override the value. The Inspector is also good to try out various CSS tags on an element; you can see immediate effect. Commented Mar 11, 2023 at 1:10
  • Yeah, I tried that, actually. It's just so strange! I just wonder if wordpress embeds a style... maybe even the function that overrides what can be changed in CSS. I've tried to really drill down -> div.search input#search-input.search-field. I could change font-family, padding and everything else, basically, but just not the width! Commented Mar 11, 2023 at 1:23
  • Inspector can help you see if there is an embedded style. Or looking at the source code. Could be the theme that is fixing the length. Could be in header.php or sidebar.php (if a widget). Commented Mar 11, 2023 at 19:12
  • I posted this on wordpress.org and someone noticed that pixels work but percentages don't. I'm not marking this as solved just yet as I'm holding on to hope that someone can figure out how to make percentages work :) Commented Mar 11, 2023 at 21:22
  • Percentages are based on the parent container size. Pixels will override the parent container size, if the number of pixels is wider than the parent container. Commented Mar 11, 2023 at 23:19

1 Answer 1

0

Over on wordpress.org, A user commented that targeting this path:

header form.search-form, header .search input { width: 100%; } might work and it did.

I didn't realize that targeting the form would have transpired to much but it did. His answer resolved it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.