Increase Button Size with CSS: Impulse Theme Hero Video

Store Design
1

Hi,

I have 2 different hero videos (desktop version and mobile version). I am trying to increase the size of the button that is overlayed on the video. The controls for this section within the Shopify editor are very limited. Is there some CSS code that will increase the button size. The code I have tried is not working. The webpage is https://bionicgym.com/pages/a10052024

Thanks

Screenshot 2024-05-13 111558.png
Screenshot 2024-05-13 111558.png445×659 29.2 KB

2

Hi @WesQ

if you use this css it will increase the button of the hero video link

.hero__link .btn {
    width: 200px !important;
    height: 50px !important;
}

Insert this in your base.css or section CSS area. I will solve your issue.

THank you for ShopiDevs

1 Like
3

Add This css in your edit Code > theme.css File

main#MainContent .shopify-section.index-section--hero:first-child .hero__text-wrap .animation-contents a{ 
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
main#MainContent .shopify-section.index-section--hero:nth-child(2)  .hero__text-wrap .animation-contents a {
   width: 250px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
4

Thank you for this solution

5

Hi,

This code worked when I have the hero video on a regular page. I now have the video on my homepage but when I include this css it affects the formatting of all the buttons on the homepage. I have removed the CSS for now and everything is back to normal. I am wondering if there is additional line of code I need so that changes are only made to the button in the hero video section? The webpage is http://www.bionicgym.com