How to make search bar width different for different devices?

[CrossTalks]

I want to make my website search box width different for all devices as
480px & Smaller = 23EM
481px - 767px = 33EM
768px - 979px = 43EM

and ON ALL GREATER = 63

How to do that please let me know…

[thai]

Hi There,

Please add the my-search class to your search element:

After that add this custom CSS:

.x-search.my-search {
    width: 63em !important;
}
@media (max-width: 980px){
    .x-search.my-search {
        width: 43em !important;
    }
}

@media (max-width: 768px){
    .x-search.my-search {
        width: 33em !important;
    }
}

@media (max-width: 480px){
    .x-search.my-search {
        width: 23em !important;
    }
}

Hope it helps