Icon alignment problem in mobile headers

Store Design
1

Hello, I’m using Horizon Theme and I’m having a display issue with the header for icons and their placement.
It’s perfect on the desktop version, but on the mobile version, the display and placement of the icons are catastrophic.

Thank you in advance for your help.

2025-09-08_09h14_00
2025-09-08_09h14_00391×118 4.84 KB

2025-09-08_09h13_48
2025-09-08_09h13_481274×100 7.33 KB

2

please provide link for your store

3

please provide link for your shopify store

4

Hey @Toky1

Happy to help you out, share your store URL and Password if enabled.

Best,
Moeed

5

https://sacochestore.com/ pass: 1111

6 
.header__column .header-actions__action {
    margin-top: 0px !important;
    padding: 0px !important;
}

use this css base.css file

7

Please add this code to your theme.liquid file, after <head> to solve the issue

<style>
@media (max-width: 749px) {
.header__columns button { margin-top: 0px !important; }
header-actions {  align-items: center; }
}
</style>

Screenshot 2025-09-08 at 14.41.22
Screenshot 2025-09-08 at 14.41.221120×610 269 KB

Best regards,

Dan from Ryviu: Reviews & QA

8

Hey @Toky1

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.header__column .header-actions__action {
    margin-top: 0 !important;
    padding: 0 !important;
}
}
</style>

RESULT:

image
image371×499 44.4 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

9

@Toky1

for css for this (@media screen and (max-width: 768px) { .button, .button–primary {) remove this
padding and margin-top

image
image401×154 4.28 KB