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

Solved
Shuaib1975
Tourist
4 1 3

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?Screen Shot 2021-10-18 at 1.21.33 AM.pngScreen Shot 2021-10-18 at 1.22.01 AM.png 

Accepted Solutions (3)

Accepted Solutions
KetanKumar
Shopify Partner
24941 2500 9043

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Shuaib1975
Tourist
4 1 3

This is an 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?

View solution in original post

KetanKumar
Shopify Partner
24941 2500 9043

This is an accepted solution.

@Shuaib1975 

thanks for update

@media only screen and (max-width: 749px) {
.hero--adapt .hero__text-title {margin-top: 35px;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)
KetanKumar
Shopify Partner
24941 2500 9043

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shuaib1975
Tourist
4 1 3
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
Shopify Partner
24941 2500 9043

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Shuaib1975
Tourist
4 1 3

This is an 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?

View solution in original post

KetanKumar
Shopify Partner
24941 2500 9043

This is an accepted solution.

@Shuaib1975 

thanks for update

@media only screen and (max-width: 749px) {
.hero--adapt .hero__text-title {margin-top: 35px;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Shuaib1975
Tourist
4 1 3

@KetanKumar 

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

best regards

KetanKumar
Shopify Partner
24941 2500 9043

@Shuaib1975 

its my pleasure to help is 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing