Relocate button between animation and section below on dawn.

[Phreshcareco]

Hey guys, 

Ive been a little stuck on this one, i was hoping someone could help. I want to move the the button half way between 2 sections.

I have a animation at the top & a rich text section with a button at the bottom. 

I was hoping i could move the button in between the animation and rich text section. I would also like to make the rich text bottom padding smaller so it doesnt look so clunky. 

Url - www.phreshcareco.com.au

Ive attached a screenshot for a reference. 

Any help would be greatly appreciated. 

Cheers,

 

[PaulNewton]

@Phreshcareco as a band-aid use a custom-css setting and absolutely position the button, the containing parent will need position:relative for this to work.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.rich-text__blocks {
  position: absolute;
  top: -40px;
  background: transparent;
}

test on mobile devices, the -100px may need to be changed to percent, or rem, or viewport-heights; 

If you want this to behave consistently really the button should be a part of the section with the animation , so it's positioned below starting out then it animates to a default position on load or as user scrolls.

If you need that customized further or the video section to have a button, custom-liquid/html setting block then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Luck.

[vinh0225 · Accepted solution]

Hi @Phreshcareco 

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
3. Open the file assets/base.css and add the following snippets:

.home__richtxt.isolate {
    top: -48px;
}

.home__richtxt .rich-text.content-container {
    background: transparent;
    padding: 0;
}

.home__richtxt .rich-text.content-container .rich-text__blocks {
    background: transparent;
}

Please let me know if you have any concern.

Cheers!

[BSSCommerce-B2B]

Hi @vinh0225 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.home__richtxt.isolate {
    top: -48px !important;
}
.isolate {
    position: relative !important;
}

Step 3: Save and reload home page.

=>> The result: 

#Mobile: 

#Desktop: