My Search Box looks quite big on mobile version

Technical Q&A
1

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.

Capture.JPG
Capture.JPG387×684 40.2 KB

2

@ashraffq

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

Thanks!

3

Hello There,

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

4

.

.

.

.

.

.

.

.

.

.

5

…

6

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

7

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

on the desktop looks perfect

on desktop is good.JPG
on desktop is good.JPG1349×314 49.1 KB

But on the Mobile it doesn’t

on mobile.JPG
on mobile.JPG387×259 25.9 KB

8

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