Search bar not working properly

Hi @charlyibc,

Ad 1. You could try the following CSS code to make the search bar wider:

@media (min-width: 1800px) {
html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
  min-width: 1500px !important;
  left: -1470px !important;
}
}

You’ll need to modify the code for different screen sizes.

Ad 2. I can’t see any problems with scrolling. A more detailed description of the problem would be appreciated ??

Ad 3. Do you encounter any problems with the setting checked? If not, you can ignore the notice.

Regards,
Marta

Hi @martadella,

Ans 1. I put this css in customize theme, didn’t work. Added to Child Theme > style.css and it was still contained

Ans 2. Just realized what the issue was; forgot have 27″ iMac mirrored to TV at 720p. Duh. My apologies!

Ans 3. I can’t see any noticeable problems with it being checked

New 1. Is there css to center search box on page and remain responsive to viewport?

New 2. Is there a way to have search list on left side and detailed print on right? Thanks!

Kind Regards,
Charly

• This reply was modified 3 years, 4 months ago by CharlyIBC.

Hi Charly,

On mobile, it displays the search bar overlay and on desktop the search icon is on the right-most part of the menu and displays the dropdown. Both are rendering fine in incognito mode.

Best regards,
Clint

Hi Clint,

Thanks for your reply.

Questions:

1. Is there a way to force the search box to cover 75% of desktop screen?

2. How can I change the list to show on left side and print on right?

Kind Regards,
Charly

Hello Charly,

With your current layout (desktop), you might be able to use something like:

.dgwt-wcas-suggestions-wrapp {
	width: 70vw !important;
	left: 360px !important;
}

.dgwt-wcas-details-wrapp {
	left: 63px !important;
}

I have a smaller screen so here’s a screenshot: https://prnt.sc/1bfp76l

Your search icon is positioned to the right-most part of the page. If you move the search icon towards the center or left-most part of the page, it should switch the display of the suggestions list and details panel.

Best regards,
Clint

Hi Clint,

Thanks for your reply. I tried your suggestions, no joy. Wound up redoing my header to bring the results more to center.

I messed around with css, but was unable to make the print box wider, add margin to right of box to pull it in from edge and center it more and cover much of page on desktop. ??

Kind Regards,
Charly

Hi Charly,

I think you’ll need to add breakpoints and experiment with the different screen sizes:

@media (min-width: 992)

Right now, there are Javascript errors on your site so the search icon is not responding. Maybe it’s related to the changes you made recently with your header?

Hi Clint,

No not header changes, I had a plugin causing the errors. Fixed it. Don’t have the time at the moment, to mess around with search. Will look into it when I have time.

Thanks!
Charly