How can i make my search bar abit smaller

[createdbylove]

How can I make my search bar background just a little bit smaller? And how I change the line colour from black to a dark grey colour please 🙂

 

 

[Made4uo-Ribe]

Hi @createdbylove 

Would you mind to share your store URL? Thanks!

[createdbylove]

I've sent you a message 🙂

[Made4uo-Ribe]

Thanks for the info, is this for the mobile screen? 

Do you mean like this? If it is check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

@media only screen and (max-width: 989px){
.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus {
      box-shadow: 0 1px 1px darkgrey; 
}
.search-modal__content {
    padding: 0 12rem 0 5rem;
}
.search-modal__close-button {
    right: 7rem;
}
}

• And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[createdbylove]

For desktop and laptop please 

[Made4uo-Ribe]

Oh, Sorry didnt get it check this one again.

Same Instruction. Please, replace to this. 

.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus {
      box-shadow: 0 1px 1px darkgrey; 
}
.search__button .icon {
    height: 3rem;
    width: 3rem;
}

 And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[createdbylove]

Thanks it still not how I want it. I'll message you