Jump to content

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

Go to solution Solved by Lesum,

Recommended Posts

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:

 

image.png.90e60b233af8ed79e1a578e04389ef0c.png

 

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 🙂

Edited by WebShark
forgot url
Link to comment
  • Solution

@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;
    }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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? 🙂

Link to comment

@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;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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?

Link to comment

@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;

}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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 😄

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.