How do i change the button position on locksmith page?

Topic summary

A user seeks help centering the login button on a Locksmith membership page. The button is currently positioned off-center and needs CSS adjustment.

Proposed Solutions:

Three community members offered CSS code snippets with similar approaches:

  • PageFly-Amelia: Suggested adding CSS to theme.liquid targeting .page-width div with flexbox properties (display: flex, justify-content: center)

  • Made4uo-Ribe: Recommended modifying the button element directly in base.css/style.css using absolute positioning (position: absolute, left: 50%, transform: translateX(-50%))

  • Tech_Coding: Proposed flexbox centering in theme.liquid with align-items: center and flex-direction: column

Current Status:

The user reported partial success—the membership page button is now centered, but other pages have been negatively affected by the CSS changes. The issue remains unresolved as the solution needs refinement to target only the Locksmith page without impacting other site pages.

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

How do i change the position of the log in button to be centered? This is a locksmith page.

here is the page link: https://maisonsaintil.com/pages/members-only

1 Like

Hi @Sab24

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

p { color: initial;!i;!; } .page-width>div { display: flex; flex-direction: row; justify-content: center; margin-bottom: 10px; }

Hope that my solution works for you.

Best regards,

Amelia | PageFly

Hi @Sab24

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div a.btn.btn-primary.btn-block.button.button--primary {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

main#MainContent {
    position: relative;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

Hello @Sab24

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

main#MainContent .page-width>div { display: flex; align-items: center; max-width: 100%; flex-direction: column; margin-bottom: 10px; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like

it worked for the memebership page, but the rest of my pages look like this: