![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: hero
-
AuthorPosts
-
June 3, 2022 at 2:05 pm #1354026
Hello,
I have a problem withe layerslider I create as a Hero Slider. It starts below the top of the browser window, depending on the size of the browser window. Even that the header of the page have “transparancy and glossy” (Transparenz und Durchscheinend) I have awhite space on the top.
Also on mobile Version it’s a huge white space between Hero Slider and top of browser window. The URL is Password protected you can find both in PC.
Thank you
ClaudiaJune 3, 2022 at 6:19 pm #1354052Hey Claudia,
I can’t see that happening on my end using Chrome. Could you share a screenshot of what you are seeing on your end, and in which browser please?
Best regards,
RikardJune 3, 2022 at 6:36 pm #1354064Hi Rikard,
sure here is the link: https://imgur.com/a/xEa0hQ2
I grab this link also from Chrome, my colleges working on windows, me on Mac but we see the same.
Thank you
ClaudiaJune 5, 2022 at 9:29 pm #1354257Hi,
Thank you for your patience and the link to your site, the yellow background looks like an SVG with an absolute position instead of a relative position.
You may wish to create a mobile version of your slider with the position adjusted for the device, this is often necessary for sliders that are created for the landscape desktop screen to show on portrait mobile devices. Please see the layerslider documentation for more detail.Best regards,
MikeJune 6, 2022 at 12:56 pm #1354293Hi Mike,
yes it is a SVG. Unfortunally the layerslider documentation is very poor and I can’t find there a help how to adjust the background or where to fix the position on relative.
Maybe you can give some more information to help me out?
Thank you
ClaudiaJune 6, 2022 at 2:08 pm #1354304Hi,
In my tests it doesn’t seem that you can choose different background images for the slider, but if you add the background image as a layer you can set it to show based on screen size, for example, here I have one layer as my desktop background image with a “stacking order” set below 100 so the other layers will be on top, and the “device visibility” set to only desktop & tablet:
the here I have a different image used for the mobile background image:
then mobile shows:
and desktop / tablet shows:
now I know your “yellow background” is not full size but you should be able to manually “position” the layer in the layerslider editor for the desired placement.Best regards,
MikeJune 7, 2022 at 10:41 am #1354369Thank you Mike, I will try this. Right now the SVG is placed on the background Layer for the first slider and this Layer is used for all slides. Because I duplicate the first slide and just changing the titel and the image. Maybe I have to change the SVG to a picture?
If I will sucseed I will tell you, if not also :)
Thanks
ClaudiaJune 7, 2022 at 12:13 pm #1354376Hi,
Thanks for the feedback, I understand that you are using the same background for multiple slides, but try removing it and adding it to each slide as a layer like above.
If this doesn’t help please export your slider and link in the Private Content area through DropBox so we can try.Best regards,
MikeJune 8, 2022 at 11:28 am #1354506Hi Mike,
thank you. The client changed his mind – now it will looks different, no Hero Slider anymore. Very pitty because I almost succseed with your help. The only point was now that in the mobile version the arrows was far below the slider itself. See Screenshot in PC
Greetings ClaudiaJune 8, 2022 at 1:12 pm #1354519Hi,
That is too bad, anyways when I check your site for mobile I don’t see the same issue, please see the screenshot in the Private Content area.
Your screenshot looks like the full-screen slider, but I see the layerslider, please link to the page for your screenshot so we can examine.Best regards,
MikeJune 8, 2022 at 2:05 pm #1354525Sorry, it was just the screenshot from LayerSlider. The page you saw is the one the client choose now and mobile is working fine.
The page with Hero Slider I create you can find in PC.
Greetings ClaudiaJune 8, 2022 at 6:48 pm #1354557Hi,
Thank you, I see that the layerslider is showing at full page height and it is the only content on the page, do you plan on adding more content?
I recommend creating new layers that show only on mobile on a layerslider canvas that is the correct size for mobile, such as discussed above, then the arrows should show more centered, or instead I would use the below slider controls as they would stay in place.
I think you can choose the below arrows instead of the default dots.Best regards,
MikeJune 9, 2022 at 2:29 pm #1354665Hi Mike,
that was just a test page, actually there will be content on the page. I will try your recommendation for my own as soon the project is finished. So I know for the next project how to handle it.
Thank you, it was really helpful!
ClaudiaJune 9, 2022 at 5:20 pm #1354692 -
AuthorPosts
- You must be logged in to reply to this topic.