Responsive Search Form

Hi there,

This page is using this CSS for the search field:

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

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?

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/

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.

Leo's code was missing a character - I just updated it.

thank you Leo and Tom. case closed, good support

Glad we could help!