How to move the 'Shop Now' button in Debut theme?

[Ron77]

Hello, does anybody know how to change the location of the “shop now” button in the picture below from middle to the bottom

I am using the debut Theme

[Biterscode]

can u send me your site url , I can fix it

[KetanKumar]

@Ron77

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[Ron77]

Hi,

my site url is www.brandsandbeyond.me

Thank you

[KetanKumar]

@Ron77

thanks for url

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

#shopify-section-1616076896d84b84a3 .hero__inner {vertical-align: bottom;}

[Ron77]

I have pasted the code as below

And still it doesn’t show correctly on Mobile screen

[suyash1]

@Ron77 - please add this css to the very end of theme.scss file and check, I read above you copy pasted code but it s not showing up in css file, so I think either it is nto properly copied or history not allowing to load updated css, so clear cache too if you have any app

#shopify-section-1616076896d84b84a3 .hero__inner{vertical-align: bottom;}

@media screen and (max-width:749px){
#shopify-section-1616076896d84b84a3 .hero__inner{padding-bottom: 10px;}
}

[KetanKumar]

@Ron77

sorry for this first code is desktop and the below code is mobile

#shopify-section-1616076896d84b84a3 .hero__inner {
    vertical-align: bottom; /* Desktop */
}
@media only screen and (max-width: 749px) {
#shopify-section-1616076896d84b84a3 .hero__inner .hero__btn {
    position: relative; /* Mobile */
    bottom: -50px; /*Mobile */
}
}

After code view Desktop and mobile