Video in Header Position Issues

Hi,

I just change the video module position from "bottom3" to "header", but there are two issues with this module position change as you can see at http://fluye.co/

1. The data-sr functionality works, but its text is not longer centered.
2. The image background is not showed.

Thanks for your help,

dp

Hi

Some of the module positions has default functionality disabled to make template features available, so You cannot use it.

Instead You can use css to use it as a backgorund:

Code: Select all

#gkHeaderMod {
    background: #00c3f2 url('path_to_your_image') repeat scroll 0 0;
}


Here a styling to lower the text:

Code: Select all

.gk-video-link {
    position: relative;
    top: 300px;
}


Hi,

I just included the code, thanks for that, but it's not working properly, please look at http://fluye.co/.

- The background image doesn't fit properly and it's completely static (no responsiveness).
- The video link doesn't fit in the center in devices (smartphones, tablets).

Thanks for your help,

dp

Hi

Some additional styles:

Code: Select all

#gkHeaderMod {
background-size: cover;
}

#gkHeader {
    position: static;
}


hello,

Excellent, thanks!

Just one more detail, please look the image attached. The video link doesn't fit properly in smartphones.

Thanks,

Hello,

This is a little update for the last post,

I just included this code in the override.css file and it improves the video-link position in smartphones, but it still doesn't look centered in iPad, maybe I missed something, thanks:

@media only screen and (max-width:699px) {
.gk-video-link {
position: relative;
top: 150px;
}
}

Hi

You will most probably need to add a lot more of those adjustments. For different screen widths. You can also try replace the px value with %.

@media only screen and (max-width:699px) {
.gk-video-link {
position: relative;
top: 40%;
}
}

Hello,

Well, trying replacing px with % didn't work, so I follow your advice creating another block of the same code with a bigger screen size and it's working good enough, thanks!

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro