How can I adjust the width of a certain button I added in?

michaelecom
New Member
8 0 0

The website is:

https://wealth-strategies.myshopify.com/

 

I have added the following code to the "Custom HTML" section on the Prestige theme:

<a href="https://bit.ly/39xhdep" class="Button Button--primary Button--Full Button">View Course</a><br> 

 

I need to make the button the entire length of the video.

 

09.png

 

I tried the "Full" option and it did not work, I read about adding CSS code but I have no idea how to do that with this current button - I had to make the code like that for it to display as a block.

 

Any help is very appreciated!

0 Likes
made4Uo
Trailblazer
262 10 51

Hi @michaelecom ,

Try this code:

.Button--Full{

display: block;}

Make sure there is no other display attribute for this button. If it does add !important

.Button--Full{

display: block !important;}

 

Let me know if it works

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
michaelecom
New Member
8 0 0

Thank you for the quick reply, I've used this code previously and the width is now too long (extends past the video)

 

Is there a way we can have it align with the video?

 

Thank you

0 Likes
made4Uo
Trailblazer
262 10 51

Is your video wrap in a div container? If so, you can put the button there so it will match the width.

You can also set the width for the block and add margin: 0 auto; to make it centered

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
made4Uo
Trailblazer
262 10 51

Sorry. My bad. I did not know you have your website open.  I can inspect your website in a few. 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
michaelecom
New Member
8 0 0

Awesome! Thank you!

0 Likes
made4Uo
Trailblazer
262 10 51

@michaelecom  Sorry for the delay. Can you put your button inside the text align div? Code should look like below

 

<div style="text-align: center;">
<video controls="true" autoplay="true" width="90%">
<source src="https://cdn.shopify.com/s/files/1/0597/9032/8017/files/Wealth_Strategies_And_Personal_Finance-1_1.m4..." type="video/mp4">
</video>

<a href="https://bit.ly/39xhdep" class="Button Button--primary Button--Full Button">View Course</a>
</div>

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
michaelecom
New Member
8 0 0

Hi, this caused there to be 2 videos, the button was not the length of the video.

 

Any suggestions? Thank you for your help. 

0 Likes
made4Uo
Trailblazer
262 10 51

Oh. Dont add this code below. Instead reposition your button inside the div. The code should look like below. Code in blue is your button

 

<div style="text-align: center;">
<video controls="true" autoplay="true" width="90%">
<source src="https://cdn.shopify.com/s/files/1/0597/9032/8017/files/Wealth_Strategies_And_Personal_Finance-1_1.m4..." type="video/mp4">
</video>

<a href="https://bit.ly/39xhdep" class="Button Button--primary Button--Full Button">View Course</a>
</div>

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
michaelecom
New Member
8 0 0

Hi, i've added the code by itself. Now, the button is a little too long.

 

Am I missing something?

0 Likes