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,

[Author]

Posts