How can I align my buy buttons on mobile view in the Dawn theme?

Store Design

Topic summary

A user is experiencing alignment issues with buy buttons on mobile view in the Dawn theme. On desktop, they successfully aligned buy buttons with variant selectors and descriptions using custom CSS that sets fixed widths (690px/688px). However, on mobile devices, the buttons extend beyond the screen boundaries.

Current situation:

  • Desktop alignment works correctly with custom CSS
  • Mobile view shows buttons overflowing the screen
  • User included screenshots demonstrating both views

Proposed solution:
A PageFly representative provided a fix involving adding CSS code to theme.liquid above the </head> tag. The suggested code appears to be mobile-specific and removes the custom width settings for smaller screens.

Implementation steps:

  1. Navigate to Online Stores > Themes > More Actions > Edit code
  2. Open theme.liquid file
  3. Paste the provided code above </head>

The discussion remains open pending confirmation of whether the solution resolved the issue.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi guys, I have a problem with my buy buttons on the smartphone view. I aligned my buy buttons with the variant selector and descriptions on the desktop view perfectly using this code:

.collection__title.title-wrapper { text-align: center; } .button--full-width { width: 690px; } button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw { width: 690px; } @media screen and (min-width: 768px) { select#Option-template--19334462472537__main-0 { width: 688px; } @media screen and (min-width: 768px) { select#Option-template--19334462505305__main-0 { width: 688px; } @media screen and (min-width: 768px) { select#Option-template--19334449791321__main-0 { width: 688px; } @media screen and (min-width: 768px) { select#Option-template--19334437175641__main-0 { width: 688px; } @media screen and (min-width: 768px) { select#Option-template--19334462669145__main-0 { width: 688px; } @media screen and (min-width: 768px) { select#Option-template--19334462439769__main-0 { width: 688px; }

And on the desktop it looks like this:

Zrzut ekranu 2023-08-13 163513.png
Zrzut ekranu 2023-08-13 163513.png946Ɨ749 73.2 KB

Unfortunately, on the smartphone view, my buttons go way beyond the screen. How can I fix it, so they are also aligned with everything? Iā€™m currently using the dawn theme. Here is my website: www.spicysneakers.pl/

Tad123_0-1691937415652.png
Tad123_0-1691937415652.png520Ɨ536 19.5 KB

I appreciate the help!

1 Like
2

Hi @Dat999

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

This code is specific to the mobile and removes the custom width

PageFlyNoah_0-1692188891526.png
PageFlyNoah_0-1692188891526.png390Ɨ844 29.9 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly