Shop Now button on Brooklyn Theme

[Tiffany_Patters]

Hi! I am trying to move the shop now button a little more to the bottom of my hero picture. I tried a code from a previous forum, but it was out of date lol please help! Thank you in advance :)

[NikkiThibodeau]

Hi Tiffany!

Parker here from the Guru Team :)

Happy to help you with getting that Shop Now button moved down on the Hero Slider. Before we change anything, let's go to Online Store > Actions > Duplicate
Because it's always good to have a backup!

1. Let's head over into the code editor! Online Store > Actions > Edit Code
2. Click on Assets > theme.scss.liquid
3. Find the code a.hero__cta around line 2282.  

There, you'll see margin-bottom is set to 0. Changing this to something like margin-bottom: -300px; will bring it closer to the bottom. Continue to adjust the number to position it exactly where you'd like!

How’s the launch going, Tiffany? Do you need a hand with setting anything up in the backend?
Let me know! :)

[Tiffany_Patters]

yes! it worked! Can you point me in the right direction for the text above it too? I'd like to move that down as well.

Launch is still going, we're working on it! Thanks for asking! :)

[NikkiThibodeau]

Hello Tiffany!

I'm happy that solution worked for you and that your launch is coming along nicely :) 
In order to move the title and subtitle, it would be just a matter of adjusting the margin-bottom under their respective elements.

As you can see, the .hero__title and the .hero__subtitle are just above the .a.hero__cta we edited last time. Don't forget to go to Online Store > Actions > Duplicate* to backup our working theme first!

Cheers,
Parker

[Mattia_Perroni]

Hello @Parker, 

I anjoyed reading your reply. Thank you!

By doing so, both mobile and desktop will change. Where can I find the specific code by viewport? 

Thank you!

[Mattia_Perroni]

I actually just spent a bit more time and I found all the @media at the bottom of the page!

There are quite a lot!

[Pfalmer]

I've been able to change the button location successfully for the desktop version, but the mobile version needs separate adjustment now, is that possible? 

[Szabi]

@NikkiThibodeau

Thank you for this post.

I have bit of an issue when applying these steps. I do want to move the "SHOP NOW" button the the left on desktop only and keep it center on mobile view, but when editing code, it moves on the mobile view too.

Any solutions?

Thank you

[Crimson]

Hi all,

Not sure whether is there a solution to @Szabi problem. I am also facing this as i want the 'Shop Now' CTA button to be on the right of the desktop but center on mobile view.

Changing the desktop view changes my mobile CTA button too.