Further reduce search box width
-
Hi there,
Good day.
I hope to further reduct the search box width in the header.
Previously I tried following css code, it works partly, but when try to further reduce the value, say adjust to 120px width, it’s not working.
/* adjust header search box width */
div[class*=”wd-header-search-form”] input[type=’text’] {
min-width: 190px;
}
Could you pls help to check how to further reduce the width by css? Thank you for your kind support.
regards,
Luie
Attachments:
You must be
logged in to view attached files.
Hello,
Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:
.wd-header-search-form {
max-width: 120px !important;
flex: 0 0 120px !important;
}
.wd-header-search-form input[type="text"] {
min-width: 120px !important;
max-width: 120px !important;
width: 20px !important;
font-size: 12px;
}
Best Regards,
Thanks Aizaz for the quick response and guidance, the code works!
Only a small place might need to be tweaked: the margin is gone (especially on the right-hand side margin now is 0, pls see the enclosed screenshot)
Could you help to give a margin for the item?
Thank you for much for your support always.
regards,
Luie
Attachments:
You must be
logged in to view attached files.
Hello,
Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:
.wd-header-search-form {
margin-right: 10px;
}
Best Regards,
Thank you Aizaz for your professional guidance, it’s working perfectly!
can close ticket now.
Hello,
You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!
Thanks for contacting us.
Have a great day.
Topic Closed.
Best Regards,
The topic ‘Further reduce search box width’ is closed to new replies.
.
