How to resize Search Box added to homepage section

Store Design
1

I have a website that sells individual comic books. I recently updated to the Dawn 2.0 theme, which I really like. BUT, I think a lot of site visitors miss the search functionality built into the header (magnifying glass icon), making it difficult for them to find what they’re looking for.

https://comicbooksandcoffee.net/

I don’t know a ton about coding, but I was able to copy some existing code from the default “Search” page and add it into a “Custom Liquid” section on my homepage. The functionality is there and everything seems to work. I just don’t like the fact that the search box stretches to fit the entire page width on desktop.

QUESTION: I don’t understand why if it’s the same code from the “Search” page, why isn’t the size of the search box the same? Instead of the entire page width? How can I make the Homepage search box match the size of the Search page search box. It seems simple and I’m just missing something. Thanks for any insight!

ps- attached a couple screenshots to compare

2

Hi @afrey25

I hope you are doing well

I can help you

please can you share your store access

3

Hello @afrey25 ,

Hope you are doing well.

Please add the below CSS to your base.css theme file at the bottom to make it work as you required:

@media screen and (min-width: 768px) {
.template-search__search {
    width: 50% !important;
    margin-left: 390px !important;
}
}
4

Figured it out!

Thanks for the help, @rutvik_shop Your solution didn’t completely solve my problem, but it did help me figure out the final solution! I just had to dig deeper into the code and css.

The code I ended up adding was:

@media screen and (min-width: 768px) {
.template-search__search {
margin: 0 auto 3.5rem;
max-width: 47.8rem;
}
}

5

Hi @afrey25

I am trying to add the search box to my store banner too - could you share the code you pasted to make the search box appear as a static box ? Thanks