How to make the search box full width on mobile

I hope you are well today and thank you for your question.

You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

@media (max-width: 921.9px) {
#ast-mobile-header form.is-search-form {
    width: 490px;
    max-width: 100%;
}
    
#ast-mobile-header .site-header-section{
    justify-content: left;
}
}

Best regards,
Ivory Search Support

Your website is not accessible now.

Please make sure that it is accessible so I can help you.

Please try using the CSS code below to replace the above shared CSS code.

@media (max-width: 921.9px) {
    #ast-mobile-header form.is-search-form {
        width: 100%;
        margin-top: 11px;
    }
        
    #ast-mobile-header .site-header-section{
        justify-content: left;
        display: block;
        width: 100% !important;
    }

    #ast-mobile-header .ast-builder-layout-element{
        display: block;
    }
}

Please change the above CSS code to the one below or replace it.

@media (max-width: 921.9px) {
    #ast-mobile-header form.is-search-form {
        width: 92%;
        margin-top: 11px;
    }
        
    #ast-mobile-header .ast-below-header-wrap  .site-header-section{
        justify-content: left;
        display: block;
        width: 100% !important;
    }

    #ast-mobile-header  .ast-builder-layout-element{
        display: block;
    }
}

You are always welcome, I’m glad I was able to help you with this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:

Click to leave a review

I’d appreciate that. 🙂

If I can help you further, please don’t hesitate to ask.