Archived topic
Page hero background video
3 replies · Started by Andrew on December 7, 2021
I followed the guide here and it's all working great: https://docs.generatepress.com/article/page-hero-background-video/
Is this still the best way to do it? I ask because I'm wondering if this should/could be done using the newer Block element with the Page Hero type.
My main question is: I've added text (using typed.js) and an icon. It looks great on a desktop but on mobile because the icon is after the text it means it jumps up and down a line on screen meaning tapping it could be a pain. I'm trying to work out how to keep the text and icon separate so the icon stays at the bottom of the screen the whole time and isn't affected by the text.
Sorry if this isn't a GP issue - Feel free to tell me to look elsewhere for support!
Hi Andrew,
I think this is still the best way.
The alignment issue is not something that GP can control, but give this CSS a try:
@media (max-width: 768px) {
.background-video-content {
height: 186px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}Let me know :)
That's worked perfectly, thanks!
No problem :)
