FROM CACHE - en_header

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
Shopify Partner
2369 421 596

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
Shopify Partner
2369 421 596

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
made4Uo
Shopify Partner
2369 421 596

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
michaelecom
New Member
8 0 0

Awesome! Thank you!

made4Uo
Shopify Partner
2369 421 596

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
Shopify Partner
2369 421 596

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>

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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?

made4Uo
Shopify Partner
2369 421 596

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

.Button--Full {
display: block !important;
width: 90%;
margin: 0 auto;
Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
michaelecom
New Member
8 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
2369 421 596

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

}

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
michaelecom
New Member
8 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
2369 421 596

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

}

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
michaelecom
New Member
8 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
2369 421 596

@michaelecom 

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

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

}

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.