WebShark Posted June 11 Share Posted June 11 (edited) 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 🙂 Edited June 11 by WebShark forgot url Earvin 1 Link to comment
Lesum Posted June 11 Share Posted June 11 @WebShark Can you please share your site URL? 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
WebShark Posted June 11 Author Share Posted June 11 Yes, sorry though I had included it: https://cone-dolphin-lxkp.squarespace.com/turtelduen Link to comment
Solution Lesum Posted June 11 Solution Share Posted June 11 @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; } } WebShark and Earvin 1 1 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
WebShark Posted June 11 Author Share Posted June 11 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
Lesum Posted June 11 Share Posted June 11 @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 1 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
Lesum Posted June 11 Share Posted June 11 @WebShark On which specific sections/blocks would you like to reduce the padding? 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
WebShark Posted June 11 Author Share Posted June 11 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
Lesum Posted June 11 Share Posted June 11 @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; } WebShark 1 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
WebShark Posted June 11 Author Share Posted June 11 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
Lesum Posted June 11 Share Posted June 11 12 minutes ago, WebShark said: Awesome, thank you!! Take care 😄 Of course. You too! 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment