ENVY theme: lessen spacing between search icon and cart in header on mobile?

Store Design
1

In assets\theme-index.min.css I have put the code:

@media only screen and (min-width: 750px){
.site-header__icons-wrapper {padding: 0 55px; }
}

However this hasn’t worked for me. Specifically on MOBILE I am wanting to lessen space between the search button and the cart. Anyone know?

Preview of my site is: https://o983qmu0ayfuxc8k-56842748069.shopifypreview.com

1 Like
2

@bp23

Please add the following code at the bottom of your assets/theme.min.index.css file.

@media screen and (max-width: 768px){
button.icons--inline.search-show.alt-focus.header-link.header-link--button {
    flex: 0 0 48px !important;
}
}

Hope this works.

Thanks!

3

Tried that with no luck. Currently my theme-index.min.css contains this:

{% comment %} announcement bar size {% endcomment %}
.notification-bar__message {
padding: 0 !important;
}
{% comment %} announcement bar text size {% endcomment %}
.notification-bar__message{ font-size: 15px}

{% comment %} mobile header logo size {% endcomment %}
@media only screen and (max-width: 600px)
{
.site-header__logo .site-header__logo-image img {
width: 50px;
}
}

I tried deleting it all and adding that code, same issue. I then changed some of the px numbers to much smaller, and same distance. Hmmm. Any other suggestions?

4

@media only screen and (max-width: 768px){
.mobile-side-column .header-link–button{
flex: 0 0 45px !important;
}
}
Hope it helps!

1 Like
5

Very interesting. This DOES work on an Android phone but not an iPhone! Hmmmm…

6

Did you add my code? When you add it, it will show something like this: https://i.imgur.com/Nw5ipJM.png
Please add it, I will help you check it again.

1 Like
7

Yes! Looks great and works on my Android phone. But I tried from multiple iPhones and it’s spread it. So it looks differently on Android vs iPhone which is weird.