how to get full width?

for a fast fix…css…

in plugins/ajax-search-for-woocommerce/assests/css/styles.css

look for around line 615

.dgwt-wcas-sf-wrapp {
zoom: 1;
width: 100%;
margin: 0;
position: relative;
background: #444;
background: rgba(0,0,0,.2);
}

and add:

min-width: 500px;

so it looks like this

.dgwt-wcas-sf-wrapp {
zoom: 1;
width: 100%;
margin: 0;
position: relative;
background: #444;
background: rgba(0,0,0,.2);
min-width: 500px;
}

of course change the 500px to whatever you want. for mobile, you would need to create @media and screen sizes for this now since you are giving it an absolute value.

of course you will want to backup before making this change.

only do this if you do not plan on upgrading the plugin, otherwise an upgrade may overwrite this code.

It is better to put it into a custom.css file of your own and link to it.

Depending on your theme you could…in admin

go to: Appearance
——> Customize
———-> Additional CSS

and place it there but sometimes this does not work. Dependent on theme.

Hope this helps.

How can I make it responsive, it is ok on desktop but on tablet and phone not. Is there any fix for this or?

Many thanks.

In the file mentioned above you will need to add media queries…
see this page: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}

Now for what you would use…

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

you would ADD the below code to the css file but you will want to TEST the min-width sizes on your devices until you are happy with the sizing.

@media only screen and (max-width: 600px) {
.dgwt-wcas-sf-wrapp {
min-width: 200px;
}
}
@media only screen and (min-width: 600px) {
.dgwt-wcas-sf-wrapp {
min-width: 350px;
}
}
@media only screen and (min-width: 768px) {
.dgwt-wcas-sf-wrapp {
min-width: 400px;
}
}

Thanks @afterdarkgrafx for your answer.