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

The website is:

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

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

View Course

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!

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

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

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

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

Awesome! Thank you!

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

View Course

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

Any suggestions? Thank you for your help.

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

View Course

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

Am I missing something?

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

.Button–Full {
display: block !important;
width: 90%;
margin: 0 auto;

}

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?

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

}

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

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

}

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.

@michaelecom

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

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

}