Solved

Increase Button Size with CSS: Impulse Theme Hero Video

WesQ
Tourist
15 0 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

Accepted Solution (1)

Arif_Shopidevs
Shopify Partner
133 18 13

This is an accepted solution.

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Replies 3 (3)

Arif_Shopidevs
Shopify Partner
133 18 13

This is an accepted solution.

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
WesQ
Tourist
15 0 1

Thank you for this solution

Raj-webdesigner
Shopify Partner
251 55 60

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

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com