How do i change the button position on locksmith page?

Solved

How do i change the button position on locksmith page?

Sab24
Tourist
7 0 2

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

q.png

 

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

Accepted Solution (1)

Tech_Coding
Shopify Partner
375 105 88

This is an accepted solution.

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 </body> on theme.liquid
<style>
   main#MainContent .page-width>div {
      display: flex;
      align-items: center;
     max-width: 100%;
     flex-direction: column;
     margin-bottom: 10px;
  }
</style>

Tech_Coding_0-1729176744589.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 5 (5)

PageFly-Amelia
Shopify Partner
603 165 236

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 </body> -> save.

<style>

p {

    color: initial;!i;!;

}

.page-width>div {

    display: flex;

    flex-direction: row;

    justify-content: center;

    margin-bottom: 10px;

}

</style>

Hope that my solution works for you.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

Made4uo-Ribe
Shopify Partner
8754 2093 2568

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;
}

 

  • And Save.
  • Result:
    Made4uoRibe_0-1729176260818.png

     

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Sab24
Tourist
7 0 2

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

Tech_Coding
Shopify Partner
375 105 88

This is an accepted solution.

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 </body> on theme.liquid
<style>
   main#MainContent .page-width>div {
      display: flex;
      align-items: center;
     max-width: 100%;
     flex-direction: column;
     margin-bottom: 10px;
  }
</style>

Tech_Coding_0-1729176744589.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

kellyegoodd
Visitor
2 0 0

I had the same issue with centering a button on my locksmith page. What worked for me was going into the theme editor and adding a little CSS to fix it. Here's what I did:
Go to Online Store -> Theme -> Edit code.
Find the CSS or theme.liquid file.