Shopify themes, liquid, logos, and UX
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!
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
<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>
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
<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>
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:
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?
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..
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.
My bad with the brace. Can you try this instead?
#section-163260389452ac7e37 > center{
width: 82% !important;
margin: auto !important;
}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024