Why is the bottom section of the sticky content aligned with the bottom of the image whereas the top section is aligned middle. Is it possible to fix this?
Would prefer all aligned middle (I understand it's scrolling so there's movement. I just mean the initial and end state should be in the same position)
In purple, the text is floating nicely in the middle. In blue, the text is stuck to the bottom, and the user doesn't get much time on that last image before it continues scrolling the rest of the page.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) {
.nectar-sticky-media-sections.content-spacing-45vh .nectar-sticky-media-section__content-section:last-child {
margin-bottom: 20vh !important;
}
}
Hi,
Why is the bottom section of the sticky content aligned with the bottom of the image whereas the top section is aligned middle. Is it possible to fix this?
Would prefer all aligned middle (I understand it's scrolling so there's movement. I just mean the initial and end state should be in the same position)
Hope that all makes sense
Thank you!
A
Hi A,
Thank you for getting in touch.
Please share screenshots of the sections you're referring to so we can advise.
We look forward to your reply.
Kind regards,
In purple, the text is floating nicely in the middle. In blue, the text is stuck to the bottom, and the user doesn't get much time on that last image before it continues scrolling the rest of the page.
Attached files: Screenshot 2025-03-18 at 18.42.00.png
Screenshot 2025-03-18 at 18.42.15.png
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) { .nectar-sticky-media-sections.content-spacing-45vh .nectar-sticky-media-section__content-section:last-child { margin-bottom: 20vh !important; } }Thanks
ThemeNectar Support Team