Search bar not in the middle (smaller screen size only)

Hello

I use Universal Filter and my search bar on pc is in the middle, however on smaller screen its aligning left, but I want it centered no matter screen size:

This is my current code:

 /*---  Custom Search Bar on Universal Filter ---*/
.search-wrap   {
  font-weight: bold !important;
  color: #252627 !important;
  background-color: white !important;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    margin: 0 auto; /* Center the container */
    width:60%; /* Ensure it takes full width */
}
 

site: https://cone-dolphin-lxkp.squarespace.com/turtelduen
pw: 1234

Mobile is okay as it is a different code.

Thank you very much in advance 🙂

@WebShark Can you please share your site URL?

Yes, sorry though I had included it: https://cone-dolphin-lxkp.squarespace.com/turtelduen

8 minutes ago, Lesum said:

@WebShark Try adding this code under Custom CSS:

@media only screen and (max-width: 700px) {
    .custom-filter-container .customFiltersWrapper .sqs-block {
        margin: 0 auto !important;
    }
}

 

YES, thank you 🙌🙌 Do you know if there is anything to do about the lenght of the search bar? 

And there seems to be a lot of padding everywhere, can this somehow be reduced? 🙂

@WebShark Here's the updated code to adjust the length of the search bar:

@media only screen and (max-width: 700px) {
	.custom-filter-container .customFiltersWrapper .sqs-block {
		margin: 0 auto !important;
		max-width: 100% !important;
	}
}

@WebShark On which specific sections/blocks would you like to reduce the padding?

3 minutes ago, Lesum said:

@WebShark Here's the updated code to adjust the length of the search bar:

@media only screen and (max-width: 700px) {
	.custom-filter-container .customFiltersWrapper .sqs-block {
		margin: 0 auto !important;
		max-width: 100% !important;
	}
}

 

Thanks that solved it! 🙏

Regarding the padding I think there is too much space between the different filter options beneath 'Kategori' and 'Lokation'. Could this be reduced?

@WebShark Here's the code to the reduce the padding between the filter options:

.custom-filter-container[class*="custom-filter-view-buttons"].custom-filter-position-top .customFiltersWrapper .sqs-block {
    padding-bottom: 0 !important;
}

.custom-filter-container[class*="custom-filter-view-buttons"] .filterDropdown.sqs-block .archive-group-list li a {
    padding-right: 4px !important;
    padding-left: 4px !important;

}

5 minutes ago, Lesum said:

@WebShark Here's the code to the reduce the padding between the filter options:

.custom-filter-container[class*="custom-filter-view-buttons"].custom-filter-position-top .customFiltersWrapper .sqs-block {
    padding-bottom: 0 !important;
}

.custom-filter-container[class*="custom-filter-view-buttons"] .filterDropdown.sqs-block .archive-group-list li a {
    padding-right: 4px !important;
    padding-left: 4px !important;

}

 

Awesome, thank you!! Take care 😄

12 minutes ago, WebShark said:

Awesome, thank you!! Take care 😄

Of course. You too!