How to change bottom position on dawn theme mobile

Retired Boards Appdev Store Design
1

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.

2 Likes
2

@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.

3

@yvad101

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

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

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

1 Like
4

Here is the link to my store:

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.

1 Like
5

Here is the link to my store:

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.

2 Likes
6

@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.
2 Likes
7

@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;}
3 Likes
8

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.

1 Like
9

@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.

10

@Zworthkey

Unfortunately that didn’t work.

1 Like
11

@yvad101

oh sorry for that issue can you please show me error