how to adjust search box to be bigger like in the picture attached?

  • patcharee
    patcharee
    Newbie 29 points
    July 8, 2016 at 2:06 pm

    directory theme
    Directory Demo 3

    Attachments:
    You must be logged in to view attached files.

  • Josh
    Super Guru 13,875 points
    July 8, 2016 at 4:22 pm

    Hello Patcharee,
    Try the below code under Theme Setup >General Setup >Custom css

    .wlt_searchbox input {
    width: 100%;
    }

  • patcharee
    patcharee
    Newbie 29 points
    July 8, 2016 at 5:43 pm

    hiya Josh.

    thank you very much for your reply , I tried the above code but nothing change any more suggestion please?

    thank you .


  • Josh
    Super Guru 13,875 points
    July 11, 2016 at 1:31 pm

    Hello Patcharee,
    Please provide url

  • patcharee
    patcharee
    Newbie 29 points
    July 11, 2016 at 2:11 pm

    hiya

    https://www.coodcood.com/

    thanks again for helping. 🙂


  • Josh
    Super Guru 13,875 points
    July 11, 2016 at 2:15 pm

    Try the below code:

    .header_style4 .wlt_searchbox input {
    width: 800px;
    }

    or

    .header_style4 .wlt_searchbox input {
    width: 800px !important;
    }

  • patcharee
    patcharee
    Newbie 29 points
    July 11, 2016 at 4:48 pm

    hiya

    thank you Josh! its now working perfect. but its not resize when browser with mobile . 🙂


  • Josh
    Super Guru 13,875 points
    July 11, 2016 at 6:15 pm

    You can use media queries to adjust the size in different devices.Have a look at this topics >>

    Search box disappears on mobile


    https://www.premiumpress.com/forums/search/?bbp_search=media+queries
    So for your case your code for example would be:

    @media (min-width: 1200px) {
    .header_style4 .wlt_searchbox input {
    width: 800px;
    }
    }

    @media (min-width: 768px) and (max-width: 979px) {
    .header_style4 .wlt_searchbox input {
    width: 400px;
    }
    }

    @media (max-width: 767px) {
    .header_style4 .wlt_searchbox input {
    width: 100px;
    }
    }

    @media (max-width: 480px) {
    .header_style4 .wlt_searchbox input {
    width: 50px;
    }
    }

  • patcharee
    patcharee
    Newbie 29 points
    August 14, 2016 at 1:47 pm

    now working thank you for your help 🙂

  • Marie
    Marie
    Super Guru 1,818 points
    August 15, 2016 at 1:42 am

    🙂


  • Josh
    Super Guru 13,875 points
    August 15, 2016 at 9:44 am

    Thanks for updating Patcharee.Have a great day 🙂

Viewing 11 posts - 1 through 11 (of 11 total)

New Business Themes for WordPress 2020

Start your new website today!

View Business Themes