Custom position for Button on hero image on mobile

[Caidra]

Hi
I need to be able to position my button on the hero image so that it does not overlap the text on the image. Have used this code to fix the position on the desktop version:

.banner__buttons {
position: relative;

top: 55px;

}

However on mobile it is an issue as it overlaps the code etc text.
Need help to customise code for mobile to:

1. move button higher to custom space
2. reduce button font
3. Reduce button size to mirror font size
4. change colour of button from white to the brand green #12576e
5. change font colour to the brand gold #CBB26A

I tried to use the following code in the base.css file for mobile but it did not work and I cannot find the style.scss file on the Dawn 2.0 theme.

@media only screen and (max-width: 749px) {

.hero__btn {

position: relative;

top: 100px !important;

right: -20% !important;

padding: 5px 10px;

font-size: 10px;

}

}

@LitExtension

Thanks for the expert help in advance.

[oscprofessional]

Hello @Caidra

Please could you share your Store URL So that I can review it?

[Caidra]

@oscprofessional my store URL is https://rubyxx.myshopify.com/ but currently I have the button on the hero image disabled as most of my customers use mobile devices and as in the screenshot, thats not pretty

[LitExtension]

Hi @Caidra ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  #Banner-template--15944686043305__165859440717e7030a .banner__buttons {
    top: 15px !important;
  }
  #Banner-template--15944686043305__165859440717e7030a .banner__buttons .button {
    font-size: 1rem !important;
    padding: 0 2rem !important;
    min-height: 2.8rem !important;
    background: #12576e !important;
    color: #CBB26A !important;
  }
}

Hope it helps!

[Caidra]

@LitExtension you’re a genius!
I am almost there - but need 2 more things to fix in this.

1. The mobile view button is placed correctly but still has a lot of padding? How can i make it narrower - both horizontally and vertically? Refer to screenshot.
2. The colours for the desktop view remain white, how can i make it mirror the new mobile view button?

Thanks again!

[LitExtension]

Hi @Caidra ,

Please change all code:

#Banner-template--15944686043305__165859440717e7030a .banner__buttons .button {
    background: #12576e !important;
    color: #CBB26A !important;
 }
@media screen and (max-width: 749px) {
  #Banner-template--15944686043305__165859440717e7030a .banner__buttons {
    top: 15px !important;
  }
  #Banner-template--15944686043305__165859440717e7030a .banner__buttons .button {
    font-size: 1rem !important;
    padding: 0 1.2rem !important;
    min-height: 2.2rem !important;
  }
}

[Caidra]

Hi @LitExtension , I deleted the previous code you shared and replaced by this one, but it unfortunately it made the buttons white again on both desktop and mobile. Also the mobile button is also now covering the text, as before.

I also tried adding this code after deleting the earlier code I had inserted for button position on desktop - but it stayed the same

[Caidra]

@LitExtension a refresh fixed it all brilliantly - apologies for the confusion and thanks a million!