How can I align two buttons in the center on mobile?

[BudeanuJr]

Hello! I was wondering if someone can help me with a code for these 2 button allignments, I would be grateful!
I also have already added a code for some button allignments if that’s needed to know.

I want them to be in the center middle, thank you!

[mavsalqueza]

try this one

.button_parent_container{
box-sizing:border-box;
}

.your_button_class{
display:block;
margin:0 auto;
max-width:max;
}

[BSS-Commerce]

Hi @BudeanuJr

Please follow these steps:

• Step 1: Go to Online store => Theme => Edit code

• Step 2: Search file “base.css” or “theme.css” and add code at the end:

@media screen and (max-width: 480px) {
    #shopify-section-template--16887080157450__4f11a828-2cb0-400f-974c-aff31e077f1b .banner__buttons {
        position: absolute;
        z-index: 10;
        opacity: 0.5;
        top: -130px ;
        left: 190px;
    }
  }

• Step 3: Save and see the result. You will get the result like this:

I hope that this can help you solve the issue.

[BudeanuJr]

@mavsalqueza I tried, didn’t worked.
Maybe because I already have a code that moved the buttons? I have no idea to be honest.

[BudeanuJr]

Hello, @BSS-Commerce

In that photo I want that button to be in the blue area, right below the text in the middle if it’s possible.

Thank you!

[mavsalqueza]

@BudeanuJr can you share the shop url so we can check it

[mavsalqueza]

yes it could be. Try to comment out first your existing code then try the given code again, or you can share the shop url so we can check it.

[BSS-Commerce]

Hi @BudeanuJr

Please follow these steps:

• Step 1: Open Theme => Edit code

• Step 2: Search file “base.css” or “theme.css” and add code at the end (if you used our above code, remove it and replace it with new code)

@media only screen and (max-width: 480px) {
    #Banner-template--16887080157450__4f11a828-2cb0-400f-974c-aff31e077f1b .banner__buttons {
          top: 110%;
          left: 28%;
          display:block !important;
    }

    #Banner-template--17393143677194__22767b08-177d-4651-8efb-9a4039c18d10 .banner__buttons {
          top: 150%;
          left: 32%;
          display:block !important;
    }
}

• Here are the results:

I hope that it will also work for you.

[BudeanuJr]

Sure, @mavsalqueza
https://calinatural.store

[BudeanuJr]

@BSS-Commerce it worked, thank you so much for the help!