Tagged: , , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 25, 2015 at 9:43 am #385061
    beedle

    I have two issues with placing a layer slider over a video background.

    1. When I add the layerslider shortcode to the text box in the color section, black bars appear on either side of the video. It is no longer full screen. Almost as though the aspect ratio calculation gets messed up. When I remove the shortcode and just put text in there, it’s fine, so I think it’s something to do with the layerslider.
    2. I want the layerslider to automatically scale for different sized screens. Ideally, it would scale if the width or the height needed to be adjust in the same way a “background-size: cover” checks for the constraining dimension. Currently, nothing is scaling even though I have turned “responsive” on in the layerslider.

    Thanks.

    January 25, 2015 at 9:57 am #385065
    beedle

    Also, the button slides in and flashes on the screen briefly at the beginning of the slideshow when it’s supposed to be hidden. What’s up with that? I checked my settings and there’s not any offset, so it shouldn’t be sliding anywhere regardless of timing and it definitely shouldn’t be showing before it’s delay time is up. Any ideas on this?

    January 26, 2015 at 7:14 am #385258
    beedle

    Here are a few more pieces of information:

    1. I’m still having the issue with the black bars on the side of the video. I’ve noticed that if I drag to change the size of a window with the site loaded and the video playing that it is properly full screen. If I refresh the page at that same dimension, though, the black bars appear.
    2. I was able to get the layerslider responsive working by turning on the full width and then adding responsive below 1200px. That seems to work well enough, though, I would like to have it adjust based on height as well. Not sure if I need to do 100% on slider height or what.
    3. The button flashing issue is still occurring.
    4. A new issue has popped up after I got responsive working and that is that the button doesn’t center at mobile sizes (very narrow widths). I’ve noticed that if I drag to change the size of a window with the site loaded, it stays perfectly centered. But if I refresh the page and it loads at mobile size (or when testing on mobile), the button is off center.

    Thanks.

    January 26, 2015 at 10:48 pm #385900
    Elliott

    Hi!

    1. + 3. + 4. I’m not seeing them on my end. What browser, version, and operating system are you using?

    2. I don’t think it’s going to be possible to set the height to a percentage. If you set the LayerSlider to be responsive then the height will automatically scale depending on the size of your screen though.

    Best regards,
    Elliott

    January 27, 2015 at 1:11 am #385957
    beedle
    This reply has been marked as private.
    January 28, 2015 at 8:54 pm #387356
    Elliott

    Hi!

    I see it today. It seems to only happen in Chrome when you set the color section height to 100% instead of specifying a pixel value.

    I’ll flag this for the rest of our team to take a look.

    Regards,
    Elliott

    January 28, 2015 at 9:19 pm #387379
    beedle

    Hi Elliott,

    Thanks for the response. Which of the issues are you thinking is related to setting the color section height to 100%? #1 or #4?

    Thanks for flagging. Keep me posted if you guys figure out a workaround or get it solved.

    February 2, 2015 at 2:16 pm #389309
    Yigit

    Hey!

    Sorry for the late reply!
    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    .home div#av_section_1 .container {
max-width: 100%;
padding: 0;
margin: 0;
}

    Best regards,
    Yigit

    February 2, 2015 at 3:08 pm #389336
    beedle

    Thanks for getting back to me. However, that CSS doesn’t seem to make a difference for any of the issues.

    February 2, 2015 at 5:26 pm #389459
    Andy

    Hey!

    it’s weird, because when I load the site the first time black bars appear, but when I shrink browser size and back again to normal browser size the black bars disappear. There might be a plugin causing this issue. Could you please deactivate all of them and see if things get changed? If that does not help please give us admin access so we can take a deeper look. Post login details here as a private reply.

    Cheers!
    Andy

    • This reply was modified 9 years, 10 months ago by Andy.
    February 2, 2015 at 11:21 pm #389733
    beedle

    Hi Andy,

    I’m thinking you may not have had a chance to read this thread. I mentioned the exact thing about the black bars going away when the window is resized in my post from a week ago. I also provided you with admin access in the private data of the very first post. Feel free to go in and take a look and test changes. If you do go in, please also check the issue with the button being off center (issue #4 above) as that one is quite problematic as well.

    The only plugin I had running is Duplicator. I deactivated it which, not surprisingly, had no effect. It’s back on now.

    Thanks for following up.

    February 3, 2015 at 1:52 am #389805
    Andy

    Hi!

    please update to the newest version of Enfold (v3.0.8).
    For your button on mobile use this code:

    @media only screen and (max-width: 767px) {
#top #wrap_all .ls-wp-container .ls-slide h4.intro-button:hover {
left: 144px !important;
}}

    Cheers!
    Andy

    February 3, 2015 at 11:17 am #389971
    beedle

    Hi Andy,

    Thanks for the css for the mobile button. That works to center it, but the button slides over to the right when you hover on it and try to click it.

    I updated to v3.0.8 and it doesn’t look like any of the issues were resolved through the update.

    Last, did you go into the admin and make any changes to the site? Please let me know if you do go in and make edits. Previously, the video was playing full-screen at smaller sizes just fine and now when I resize the window, I get black bars at the top and bottom. This had never happened before. (Also, this appeared before I updated so it’s not related to the update. I noticed it when I went to test your CSS from your last post.)

    Thanks.

    February 6, 2015 at 7:13 pm #392213
    Andy

    Hey!

    What do you mean with the button slided over to the right? It does not happen for me, but I can’t see in your source code that you are using the CSS I provided you. The button is one the left side again. Please use my code to center the button.

    I did not change anything on your site.

    For the future it’s better to open one ticket for each problem you have, so others can find about their issues easier. Also it takes too much time for one person to ask four questions in one post and you would get faster replies when you use different tickets.

    Cheers!
    Andy

    February 11, 2015 at 9:43 pm #394694
    beedle

    Hi Andy,

    Apologies for starting too many issues in one thread. Should I separate out the button issue now?

    Regarding the button, I added your code and it only served to make the button slide over 144px on hover so I removed it. I’ve added it back so you can see it.

    As for the letterbox issue, it’s still there and slightly worse now. (I haven’t made any changes, so maybe a Chrome update caused this new behavior.) It seems to behaving somewhat like “contain” now (rather than cover) when I resize the window. That is, it letterboxes above and below or left and right depending on the aspect ratio of the window relative to the video.

    Thanks again for sticking with this issue.

    February 12, 2015 at 1:21 am #394797
    Andy

    Hey!

    lets stick with your button in this thread and please open another ticket for the other issues.

    Please replace my code above with this one: 

    @media only screen and (max-width: 767px) {
#top #wrap_all .ls-wp-container .ls-slide h4.intro-button {
left: 144px !important;
}}

    This should hopefully work now!

    For the ticket with the letterbox please explain further as I don’t have any idea what you mean. Show the issue and what you want to achieve using screenshots (imgur.com).

    Regards,
    Andy

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.