Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

michaelecom
Shopify Partner
9 0 1

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
3856 717 1198

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

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
3856 717 1198

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

made4Uo
Shopify Partner
3856 717 1198

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

Awesome! Thank you!

made4Uo
Shopify Partner
3856 717 1198

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

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
3856 717 1198

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>

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

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

 

Am I missing something?

made4Uo
Shopify Partner
3856 717 1198

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

.Button--Full {
display: block !important;
width: 90%;
margin: 0 auto;
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

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
3856 717 1198

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

}

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

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
3856 717 1198

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

}

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
michaelecom
Shopify Partner
9 0 1

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
3856 717 1198

@michaelecom 

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

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

}

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free