How can I fix my scattered mobile header icons?

Store Design
1

Hi everyone :slightly_smiling_face: my header icons on the mobile are scattered in a row and I would like to pin them to the sides.

I have tried many css orders left and right and margin and even when I succeeded on my phone, on the Pro Max it sits messy,

please help me out if someone know how to fix this :folded_hands: Photos for understand:

Iconsss77.png
Iconsss77.png645×762 298 KB

Icons symet.png
Icons symet.png646×765 325 KB

store: berez.org.il

pass: zadoko8

Thank you!

1 Like
2

Hi @malul ,

Please use the code below to fix your menu

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the style.css file
  3. Add the code below at the very end of the file
@media only screen and (max-width: 481px) {
.ltn__header-options {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.mini-cart-icon {
    grid-area: 1/10;
}

.mini-cart-icon a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.header-search-wrap {
    grid-area: 1/9;
}
}

Result here:

made4Uo_0-1683411138521.png
made4Uo_0-1683411138521.png876×932 27.3 KB

1 Like
3

Hi @made4Uo ! Thank you so much , that is really helpfull. but It still dosent effect iphone pro max

iPhone 14 Pro max are 430 width when I check in chrome custom devices emulation the icons are good up until 425 width, what should we change for it effect also for the iphone pro max?

Thank you!!!

4

@made4Uo

Pro max.png
Pro max.png1826×744 70.4 KB

5

Please do yo know how to fix it also with iphonw pro max?

6

Hi,

Sorry. I cannot reproduce the issue.

made4Uo_0-1683560789791.png
made4Uo_0-1683560789791.png1159×901 95.2 KB

However, you try replacing the code I provided with the code below and see if it works.

@media only screen and (max-width: 750px) {
.ltn__header-options {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.mini-cart-icon {
    grid-area: 1/10;
}

.mini-cart-icon a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.header-search-wrap {
    grid-area: 1/9;
}
}
1 Like