How can I make the button smaller and put it at the bottom center of a banner on the mobile?

[ArnauP]

I have looked at many posts but none of them work for me, I want it to look the same as it looks on the desktop but on the mobile.

Any help is welcome!

[Made4uo-Ribe]

Hi @ArnauP 

Would you mind to share your store URL? Thanks!

[ArnauP]

Yes of course!

Here you have Made4uo-Ribe

https://nauancler.com/

Thank you!

[Made4uo-Ribe · Accepted solution]

Hi @ArnauP 

Please, use the heading feasturesof the banner so it will be dynamic to any screen sizes. 

Check this one. 

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile {
    position: absolute;
    bottom: 0;
    padding-bottom: 1rem;
}
.banner__box a.button.button--primary {
    font-size: 12px !important;
    padding: 0 10px !important;
    min-height: 3.5rem !important;
    min-width: fit-content !important;
}
    .banner__box>*+.banner__buttons {
        margin-top: 1rem;
    }
}

• And Save. 
• Result:
• 

  Im not sure if it enough.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[niraj_patel]

Hello @ArnauP 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[ArnauP]

Hello Techlyser_web, the store is open, the url: https://nauancler.com/.

Thanks!

[niraj_patel]

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>
@media screen and (max-width: 767px) {
  .banner__box>*+.banner__buttons {
          margin-top: 42% !important;
  }
  .banner .banner__buttons .button {
      font-size: 14px !important;
      padding: unset !important;
       margin-top: 100% !important;
  }
}
</style>

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

[ArnauP]

It work, but the heading of the banner stays up, and do you know how the button could be made smaller? (on mobile) 

[niraj_patel]

you have to customize your code because of the html structure to do  responsive as you want is quite difficult.