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
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.
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
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.
div a.btn.btn-primary.btn-block.button.button--primary {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
main#MainContent {
position: relative;
}
And Save.
Result:
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
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.