Solved

Button & Container too big on Mobile view

Airri
Excursionist
13 0 2

There's too much white space above and below the buttons on mobile view. How can I reduce this padding. Also, how can I make this button slightly smaller for mobile. 

 

On desktop everything looks fine.

 

I don't know how to make responsive image banners that change for mobile view so for now I will just make the buttons smaller. 

 

 

Mobile View Buttons.png

Accepted Solution (1)

AnneLuo
Shopify Partner
414 84 79

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  @media screen and (max-width: 749px) {
    .banner--mobile-bottom .banner__box{
        padding: 2rem 3.5rem !important;
    }

    .banner__buttons .button{
       font-size: 1.2rem !important;
    }
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 2 (2)

AnneLuo
Shopify Partner
414 84 79

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  @media screen and (max-width: 749px) {
    .banner--mobile-bottom .banner__box{
        padding: 2rem 3.5rem !important;
    }

    .banner__buttons .button{
       font-size: 1.2rem !important;
    }
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Airri
Excursionist
13 0 2

Awesome! It worked!