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

michaelecom
Shopify Partner
9 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
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 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
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

made4Uo
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 0 0

Awesome! Thank you!

made4Uo
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 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
Shopify Partner
3804 713 1124

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>

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 0 0

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

 

Am I missing something?

made4Uo
Shopify Partner
3804 713 1124

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

.Button--Full {
display: block !important;
width: 90%;
margin: 0 auto;
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 0 0

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
Shopify Partner
3804 713 1124

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

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 0 0

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

made4Uo
Shopify Partner
3804 713 1124

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

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
michaelecom
Shopify Partner
9 0 0

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
Shopify Partner
3804 713 1124

@michaelecom 

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

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

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!