Changing the width of a CTA button on product page debut theme

New Member
10 0 0

Hi,

 

I'm sure this is a very basic question, but for the love of me, I can't change the width of JUST the CTA button I have added into my product page, without it changing every single button width across my site.

 

So in short: 

Currently my CTA button is at the bottom of the page on the left hand side. I added it by adding the following code:

<a class="btn" style="margin-top:50px"; href="#">Etsy Reviews</a> to my product-liquid-template.

Screen Shot 2020-01-02 at 21.20.49.pngButton on product page.

I am then trying to change it's width to 100% by adding the following code to the theme.scss sheet:

 

a.btn {
width: 100%;
}

 

Whilst this does change the width on the product page... it also ends up changing the width of every button on the website to 100%. 

 

Can anyone provide a resolution to this?

 

Kind Regards,

 

Raees

0 Likes
New Member
10 0 0

Solved it myself by playing about!

 

Heres how i managed to do it:

Rather than making changes to the theme.scss.liquid sheet, I instead added a line to the button HTML code in the product-template liquid which did the job.

 

So before it was:

<a class="btn" style="margin-top:50px"; href="#">Etsy Reviews</a> 

 

And after i changed it to:

<a class="btn" style="width:100%"; href="#">Etsy Reviews</a>  (also removed the margin).

0 Likes

Thank you for posting your solution, even though you ended up figuring out yourself! That's super helpful for anyone that comes across this in the future.

Andre Ani | Technical Support Engineer, Shogun | support@getshogun.com
Try Shogun Page Builder for FREE!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution.
0 Likes