Brooklyn Theme: Moving CTA button to right on desktop, while centralizing the button on mobile

Solved
Excursionist
26 1 6

Hi everyone,

Need some help with shifting the CTA button on desktop to align with the heading and subheading (with background text color) to the right.

When i use the following codes under theme.scss.luquid it shifted the CTA button on mobile all the way to the right.

 a.hero__cta {
    margin-bottom: 0;
    margin: 20px;
    margin-left: 800px;
  }

 

What i need:

Desktop - How to shift the CTA button to align with the heading and subheading?

Crimson_0-1596191435981.png

 

Mobile - This is OK

Crimson_1-1596191475307.png

 

1 Like
Highlighted

Hello Crimson,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
26 1 6

Hello,

Thanks for the quick follow up!

My site is: https://super-bark-co.myshopify.com/

The password to enter is: skimew

0 Likes
Highlighted
Shopify Partner
2812 616 754

Hey @Crimson 

Please add following code in your assets/theme.scss.liquid or assets/timber.scss.liquid file.

@media only screen and (min-width: 750px){
.hero__slide a.hero__cta, .hero--adapt a.hero__cta {float: right;}
}

Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Excursionist
26 1 6

Hello @dmwwebartisan ,

Thanks! It seems to work but how do i move it closer to align with the headings?

Crimson_0-1596193496955.png

 

0 Likes
Highlighted

This is an accepted solution.

Hello Crimson,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

@media only screen and(min-width:769px){
.hero__text-content a.btn.hero__cta {
    float: right;
    margin-right: 0px;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Shopify Partner
2812 616 754

This is an accepted solution.

Hey @Crimson,

Remove old given code and add this new one at the bottom of your assets/timber.scss.liquid file.

@media only screen and (min-width: 750px){
.hero__slide a.hero__cta, .hero--adapt a.hero__cta {float: right; margin-right: 0px;}
}

 

Hope this will work.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Excursionist
26 1 6

Thank you so much @oscprofessional & @dmwwebartisan!

Both your solutions worked for me. Thanks for the speedy solutions!

1 Like