Search form 100%

Hi there,

I can see the issue on mobile view where the search bar extends far off to the left.

In WooCommerce > AJAX Search bar > Search bar (tab), you can set:

Max form width
Layout (Icon on mobile, search bar on desktop)
Mobile breakpoint (767)

https://prnt.sc/10h4lmn

Let me know if you’ve played around with the settings and it works for you. If not, we can add some CSS code to correct the display.

Best regards,
Clint

how can you adjust the bar to each screen automatically like flexbox?

https://stackoverflow.com/questions/30154633/css-search-box-will-be-automatically-resize-base-on-windows-size-using-flexbox

hello, sorry for the inconvenience. I tried exactly what you indicated in your comment but it doesn’t work for me. How can I apply css so that the bar fits to all the available width regardless of the size of the screen in the header as well as the amazon bar does?

Hello,

It seems that on mobile, the search bar extends outside of the viewport. Can you add the following CSS code to your Theme Customizer > Additional CSS section:

@media only screen and (max-width: 767px) {
	.dgwt-wcas-sf-wrapp {
		width: 60% !important;
		right: -170px !important;
	}
}

Thanks,
Clint