How to change bottom position on dawn theme mobile

[yvad101]

Hello, I'm trying to move the button location on the image banner to bottom center for mobile. Please help. I'm using the dawn theme. 

[Zworthkey]

@yvad101 

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

[yvad101]

Here is the link to my store:

Byrani.com

Here's what I want to change:

1. I want to move the location of both buttons on the banner image from center to bottom center for mobile.

2. I want to decrease the padding of booth buttons to make them small and more proportionate to the image on mobile.

Thanks in advance for your help. 

[KetanKumar]

@yvad101 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[yvad101]

Here is the link to my store:

Byrani.com

Here's what I want to change:

1. I want to move the location of both buttons on the banner image from center to bottom center for mobile.

2. I want to decrease the padding of booth buttons to make them small and more proportionate to the image on mobile.

Thanks in advance for your help. 

[Zworthkey · Accepted solution]

@yvad101 

@media screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile.color-background-1 {
    margin-top: 240px !important;
}
}

1. Navigate to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste Above code at the bottom of the file.
3. Save it.

[yvad101]

Thank you for you help. I was able to move the button.

How can I now reduce the button size? That was the second part of the issue I was having. 

[Zworthkey]

@yvad101 

@media screen and (max-width: 749px){
.banner--content-align-mobile-center .banner__buttons--multiple>* {
    flex-grow: 1;
    min-width: -5rem;
    width: 152px !important;
}
}

Add this code in the bottom of the section-image-banner.css file.

[yvad101]

@Zworthkey 

Unfortunately that didn't work. 

[KetanKumar]

@yvad101 

oh sorry for that issue can you please show me error

[KetanKumar]

@yvad101 

thanks for details can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.banner--desktop-transparent .banner__box {padding: 0!important;}
.banner__content {padding: 30px !important;align-items: end !important;}