Mobile layout issue: Quantity selector and “Add to cart” button not horizontally aligned in Horizon theme

Store Design

Topic summary

A user reported a mobile layout issue in the Horizon theme where the quantity selector appears slightly higher than the “Add to cart” button, while desktop display shows proper alignment.

Visual Evidence:

  • Screenshots provided showing the misalignment on mobile and correct alignment on desktop

Solution Provided:
A working CSS fix was shared that targets mobile screens (max-width: 767px) by adding a 4px top margin to the product form button. The code should be inserted in the theme.liquid file above the closing tag.

Resolution:

  • Issue successfully resolved
  • User confirmed the fix worked perfectly after struggling with the problem for two hours
  • Before-and-after screenshot demonstrates proper alignment achieved
Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

On mobile, the quantity selector and the Add to Cart button are not aligned on the same row.
The quantity box is slightly higher than the button.
It looks fine on desktop, but misaligned on mobile.
Can you please help me to fix the alignment so both elements are even.

Toki

Mobile
Mobile505×258 9.14 KB

Desktop
Desktop536×310 29.6 KB

2

Hey @Toky1,

Could you please share your store URL and password (if applicable) so that I can take a look and provide you the solution code?

Looking forward to hearing back from you.

Best,

Daniel

3

Hey @Toky1

Your website seems password protected, can you share that too?

Best,
Moeed

4

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) {
.product-form-buttons button {
    margin-top: 4px !important;
}
}
</style>

RESULT:

image
image332×482 13.2 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

1 Like
5

HI @Moeed !!

Fantastic fix, peferctly aligned.
Scratched my head for two hours.

Thank you so much!

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.