FROM CACHE - en_header

my Search Box looks quite big on mobile version

Solved
ashraffq
Excursionist
26 6 5

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

 

 
 
 
 
Accepted Solutions (3)

Accepted Solutions
dmwwebartisan
Shopify Partner
10749 2343 3341

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

ashraffq
Excursionist
26 6 5

This is an accepted solution.

 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

 

But on the Mobile it doesn't

 
 
 
on mobile.JPG

 

 
 
 

View solution in original post

dmwwebartisan
Shopify Partner
10749 2343 3341

This is an 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! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 7 (7)
dmwwebartisan
Shopify Partner
10749 2343 3341

@ashraffq 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
ZestardTech
Shopify Expert
3559 589 824

Hello There, 

 

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ashraffq
Excursionist
26 6 5

.

.

.

.

.

.

.

.

.

.

 
 
 
 
 
ashraffq
Excursionist
26 6 5
dmwwebartisan
Shopify Partner
10749 2343 3341

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
ashraffq
Excursionist
26 6 5

This is an accepted solution.

 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

 

But on the Mobile it doesn't

 
 
 
on mobile.JPG

 

 
 
 
dmwwebartisan
Shopify Partner
10749 2343 3341

This is an 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! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →