[Resolved] Responsive Search Form

Home Forums Support [Resolved] Responsive Search Form

Home Forums Support Responsive Search Form

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #499312
    Feri

    Hi there,

    Based on this tutorial https://generatepress.com/forums/topic/search-form-within-a-page-possible/#post-280649 , i make some page with search form inside

    screenshot: https://prnt.sc/igbhn6

    the result: search form too short, not responsive.

    how to make search form like generatepress forum support? (responsive, look good both mobile and desktop, fluid, long search form)
    screenshot: https://prnt.sc/igbi8k

    Thank you very much

    #499468
    Leo
    Staff
    Customer Support

    Hi there,

    This page is using this CSS for the search field:

    input.search-field {
        width: 75%;
    }
    #500787
    Feri

    thank you, it works.

    1. but how to make search form & search button have 100% width but only at mobile browser?

    2. how to make different sytle for search form A , B and C. For example i want to have search form A with 75% width, seacrh forma C 80% width etc

    3. how to change the text “Search” on search form and search button?

    #501230
    Leo
    Staff
    Customer Support

    1. Try

    @media (max-width: 768px) {
        input.search-field {
            width: 100%;
            min-width: 150px;
        }
    }

    2. Can you link me to your page and let me know where each search form is?

    3. https://docs.generatepress.com/article/generate_search_placeholder/

    #501500
    Feri

    Number 1. Try to add this code to my custom css but…

    @media (max-width: 768px) {
        input.search-field {
            width: 100%
            min-width: 150px;
        }
    }

    screenshot 1: https://prnt.sc/ihl2vo
    screenshot 2: https://prnt.sc/ihl334

    Number 2: Done.

    Number 3. Done. It works.

    #501637
    Tom
    Lead Developer
    Lead Developer

    Leo’s code was missing a character – I just updated it.

    #503276
    Feri

    thank you Leo and Tom. case closed, good support

    #503305
    Leo
    Staff
    Customer Support

    Glad we could help!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.