Boundless Theme - Button on Slide not showing on top of slide in mobile version

[Shuaib1975]

I am using Buttons on slides in boundless theme. Buttons show perfectly on top of the slides on the desktop version however button shows AFTER the slide on the mobile version. Can we make the button show on top of the slide on the mobile version as same as the desktop version? 

[KetanKumar · Accepted solution]

@Shuaib1975 

thanks for url yes please try this code

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

@media only screen and (max-width: 749px) {
.hero__content-wrapper-mobile {
display: none;
}
.hero--adapt .hero__content-centered {
display: table-cell;
}
}

[Shuaib1975 · Accepted solution]

Hi KetanKumar

Thanks a lot. That worked liked a charm. Is it also possible to reduce the
size of the text and button a bit on the mobile version so that it doesn't
interfere with the logo?

[KetanKumar]

@Shuaib1975 

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.

[Shuaib1975]

Hi ketanKumar

Thank you for your prompt response.

my site URL is:
https://bravido-clothing-co.myshopify.com/

password is "urtohs"

Thanks a lot

[KetanKumar · Accepted solution]

@Shuaib1975 

thanks for url yes please try this code

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

@media only screen and (max-width: 749px) {
.hero__content-wrapper-mobile {
display: none;
}
.hero--adapt .hero__content-centered {
display: table-cell;
}
}

[Shuaib1975 · Accepted solution]

Hi KetanKumar

Thanks a lot. That worked liked a charm. Is it also possible to reduce the
size of the text and button a bit on the mobile version so that it doesn't
interfere with the logo?

[KetanKumar · Accepted solution]

@Shuaib1975 

thanks for update

@media only screen and (max-width: 749px) {
.hero--adapt .hero__text-title {margin-top: 35px;}
}

[Shuaib1975]

@KetanKumar 

Thanks a lot. I really appreciate it. It solved my problem perfectly. Thanks again

best regards

[KetanKumar]

@Shuaib1975 

its my pleasure to help is