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

[michaelecom]

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.

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!

[made4Uo]

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

[michaelecom]

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]

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

[made4Uo]

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

[michaelecom]

Awesome! Thank you!

[made4Uo]

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

[michaelecom]

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]

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>

[michaelecom]

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

Am I missing something?

[made4Uo]

@michaelecom You can add this code below to the css:

.Button--Full {

display: block !important;

width: 90%;

margin: 0 auto;

}

[michaelecom]

Thank you! That worked!

Is there a way I can get the text to be the same width as the button and video now too?

[made4Uo]

@michaelecom 

Hi,

You should wrap this in a container but this code should work. Let me know

#section-163260389452ac7e37 > div > div:nth-child(2) > center{

width: 90%;
margin: 0 auto;
}

}

[michaelecom]

I am not sure where to add this code, I tried to add in 2 different places but it broke the page..

[made4Uo]

@michaelecom 

Hi,

My bad. In your Asset folder, find the theme.scss. Just add it to the bottom 

#section-163260389452ac7e37 > div > div:nth-child(2) > center{

width: 90%;
margin: 0 auto;
}

}

[michaelecom]

Hi, I added it to the bottom but it broke the website.

I removed the bottom "}"  and the website loaded but the text was still not within the section. 

When I add back in that character, the website does not load correctly.

[made4Uo]

@michaelecom 

My bad with the brace. Can you try this instead?

#section-163260389452ac7e37 > center{
width: 82% !important;
margin: auto !important;

}