-
AuthorPosts
-
April 24, 2020 at 1:30 pm #1206806
Hallo there,
I created a Layer Slider with a html layer with two images. Position from the top is 90%, so that it stays on the bottom left of the slide
In Safari I cannot position this html layer. It is always visible in the top of the layer slider not on the bottom.Before I tried to integrate the two images with two image layers, but then the two images always are in relation with the size of the screen and resizes themselves. So they went really small on tablet or mobile. And at least it also do not work in Safari!
How can I handle this?
I want two little images positioned on the left bottom of the slide with no resize?Thanks a lot!!!
April 28, 2020 at 4:47 am #1207694Hey NorthcoastProject,
Sorry for the late reply. I see the same thing on my end in Safari, could you try to give the images IDs or classes so that we can target them with some custom CSS please?
Best regards,
RikardApril 28, 2020 at 11:22 am #1207749Yes, I did.
For the layer I gave the ID #rating-id and for the images, which already had classes I gave IDs (#google-rating and #fb-rating), too.May 1, 2020 at 3:56 am #1208703Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (min-width: 768px) { .avia-safari .home #rating-id { padding-top: 500px; } }
Best regards,
RikardMay 4, 2020 at 9:55 am #1209463This is not working. I tried it, but then the website is destroyed!
With the code there is a white space above the website.June 8, 2020 at 1:16 pm #1220457Hallo can you please help?! I asked this question one month ago! Thank you!
June 12, 2020 at 1:56 pm #1222066Hi,
Sorry for the delay. The site looks fine when we checked it. Can you give us a screenshot of the issue?
The css code above just adds a 500px top padding to the #rating-id element, so it’s quite weird that it broke the site. Please use imgur or dropbox for the screenshot.
Best regards,
IsmaelJuly 8, 2020 at 11:09 am #1228822Sorry for my delay now.
Okay, something has changed, now I cannot see the ratings at all in Safari!
Please check the live Website to see: In Safari there are no rating pngs, in Chrome everything is fine! You can see the google and the FB pngs just on the startpage in the layerslider section on top.And now there are some errors shown in the console, also only in Safari!
Can you help?
Thank you!
KaJuly 8, 2020 at 11:37 am #1228827Okay, I found one of the problem. The ratings on mobile are back again.
So there is just still the problem with the Safari Browser!
The ratings in Safari are visible now, but as you can see the position is quit fixed and when the view height is smaller, then the ratings are gone.Can you help now?
July 13, 2020 at 8:59 am #1229873Hi,
You might need more than one media query to get it looking right, for example:
@media only screen and (min-width: 768px) and (max-width: 1250px) { .avia-safari .home #rating-id { padding-top: 400px; } }
Best regards,
RikardJuly 13, 2020 at 10:53 am #1229889Hallo, this is not the problem.
The ratings in Safari are visible now, but as you can see the position is quit fixed and when the view height is smaller, then the ratings are gone, what means, they disappear “under” the next section where the text begins.
And as said in the beginning: in the other browsers everything is fine!
It is only the safari, which does not take the styles.Best regards, Ka
July 14, 2020 at 8:37 am #1230214Hi,
Yes, but like I wrote, you likely need more than one media query:
@media only screen and (min-width: 1025px) and (max-width: 1250px) { .avia-safari .home #rating-id { padding-top: 200px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .avia-safari .home #rating-id { padding-top: 300px; } }
Please try experimenting with what works and what doesn’t in terms of the top padding and screen widths.
Best regards,
RikardJuly 14, 2020 at 12:34 pm #1230273Sorry, but the two images are still on the left and top inside the slider. It does not work at all.
It seems that Safari is not interested at all in that code.
Perhaps there is no solution for Safari.Thanks for your help!
July 19, 2020 at 6:59 am #1231523Hi,
Sorry for the late reply, I examined your slider element and found that Safari is getting the position from the parent div.ls-wrapper.ls-in-out
this div has the position as in-line css which Safari is using over the stylesheet css that Firefox & Chrome are using.
So I tried adjusting the in-line css though the layerslider options but none seem to address this, I then tried this css in the General Styling > Quick CSS field and in the WordPress > Customize > Additional CSS field:@media only screen and (min-width: 990px) { #top.home #layerslider_1 .ls-wrapper.ls-in-out{ top: 83% !important; left:40px !important; } }
Unless you have a server cache that can be cleared, this doesn’t seem to be working, but please check.
Best regards,
MikeJuly 19, 2020 at 11:24 am #1231547When I work on the website, I deactivate the cache function.
I think this is not working like I want it to work.
But now I styled it, so it can stay at top of the layer for safari. It is fine now.
You can close the ticket.Thanks for your help!
July 19, 2020 at 12:15 pm #1231550Hi,
Glad to hear that you have sorted it out, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Layer Slider image Layer’ is closed to new replies.