Why are my header icons shrinking on page load?

Technical Q&A
,
1

For some reason our header icons are now minimizing to be extremely small when the page gets fully loaded. Historically these icons stay a lot larger. Here is a video of me refreshing the our home page, and for a brief second you will see the original, historical icon size at first and then the awkward minimization happens and stays permanently. This is especially apparent on mobile. Desktop also does thing but weirdly only minimizes the “Search” icon.

I tried changing the size of our Header logo. It did nothing.

Any support is greatly appreciated!

2

Hi @cofolucian

You can try to reduce size of logo on mobile and check again or please share your store URL to check

3

Hi! Thank you for your response.

This was the first thing I tried and it did not do anything. I thought it may be a responsive design thing but it seeming more like some kind of glitch.

I just halved the logo size to 100px (pretty small) if you’d like to see:

4

Hi @cofolucian

You can add this CSS code at the bottom of our theme.scss.liquid file to solve your issue

@media only screen and (max-width: 749px) {
.site-header__icons {
    width: 100% !important;
}
}

Screenshot 2023-09-08 at 11.22.33.png
Screenshot 2023-09-08 at 11.22.33.png410×417 341 KB

5

Awesome! That seemed to fix the problem on mobile. Thank you so much! You are very responsive. You’ll see on desktop the search icon still minimizes. This is not as apparent as when the mobile header icons were minimizing so I am not as concerned.

I am also curious as to why this suddenly would start occurring? We have never had this minimization problem before.