Custom header icons don't show on mobile devices

[grimworld]

I added two custom icons to my store's header file, and they work just fine on desktop, but when you move to a mobile device they're invisible. In a simulated mobile environment like in the inspect element window, they're visible and work just fine, but as soon as you move to a real phone, BOOM, they're gone. 

site link: https://grimlabs.co, pass: tonythetiger

As you can see, one screenshot (mobile) has only the search icon visible because it's not custom. But the rest of the icons [account, hamburger, a

@PageFly-Richard @GemPages @PageFly-Kate @PageFly-Victor 

[infoatcodelab7]

@grimworld 

Its perfect on mobile

[PageFly-Victor]

Hi @grimworld 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media screen and (max-width: 767px){

.header__icons, .header__icons svg {

 display: flex !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[GemPages]

Hi @grimworld,

You can check out my suggestion below to get your concern resolved.

1. Go to Edit code on Online Store:

2. add my code  above the </body> tag on Theme.liquid:

<style>
@media(max-width: 425px) {
.header-wrapper ..header__icons, .header-wrapper ..header__icons svg {
display: flex !important;
}
}
</style>

Eg:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.