my Search Box looks quite big on mobile version

[ashraffq]

The size of the search box is quite big on the mobile version, also, I want to change the color of the search box's icon. 

[dmwwebartisan · Accepted solution]

@ashraffq 

Please add this code at the bottom of your assets/styles.scss.liquid file.

@media only screen and (max-width: 798px) {
.search__container .search__wrapper { margin-top: 10px; margin-bottom: 10px; }
.search__container input[type="text"] { height:43px !important; min-height: 43px !important; }
}

Hope this helps!

Thanks!

[ashraffq · Accepted solution]

 Unfortunately, after the resizing of the search box, the change didn't affect the search button either. 

on the desktop looks perfect

But on the Mobile it doesn't

[ZestardTech]

Hello There, 

Kindly share your store URL with me so that I can take a look and can suggest a solution for it. 

[ashraffq]

.

.

.

.

.

.

.

.

.

.

[ashraffq]

..........

[dmwwebartisan · Accepted solution]

@ashraffq 

Please add this code at the bottom of your assets/styles.scss.liquid file.

@media only screen and (max-width: 798px) {
.search__container .search__wrapper { margin-top: 10px; margin-bottom: 10px; }
.search__container input[type="text"] { height:43px !important; min-height: 43px !important; }
}

Hope this helps!

Thanks!

[ashraffq · Accepted solution]

 Unfortunately, after the resizing of the search box, the change didn't affect the search button either. 

on the desktop looks perfect

But on the Mobile it doesn't

[dmwwebartisan · Accepted solution]

@ashraffq 

Please add the following code for the mobile search icon.

@media only screen and (max-width: 798px){
.search__button { min-height: 30px !important; height: 30px !important; font-size: 16px !important; }
}

Hope this will work.

Thanks! 

[dmwwebartisan]

@ashraffq 

Your shop is password protected. Please share the password. I will check and provide a solution here.

Thanks!