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!

Replies 16 (16)
made4Uo
Navigator
254 18 89

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

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
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

made4Uo
Navigator
254 18 89

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

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
made4Uo
Navigator
254 18 89

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

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
michaelecom
New Member
8 0 0

Awesome! Thank you!

made4Uo
Navigator
254 18 89

@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>

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
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. 

made4Uo
Navigator
254 18 89

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>

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
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?