Home › Forums › WoodMart support forum › Further reduce search box width

Further reduce search box width

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 6, 2025 at 4:57 am #643236

    lswang6
    Participant

    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.
    March 6, 2025 at 1:20 pm #643391

    Aizaz Imtiaz Awan
    Keymaster

    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,

    March 6, 2025 at 2:28 pm #643437

    lswang6
    Participant

    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.
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)