-
Posts
-
Dear Kriesi-Team!
I have an issue with the responsiveness of the fullscreen slider on iPad pro (11“ 2018). While reading this great forum, I already found a lot of hints, on how to make the slider responsive for mobile devices. Now I use two different sliders: one for the desktop version and another one for mobile devices. Thanks a lot for this great support!
The only thing I could not figure out is how to make it responsive for the above mentioned iPad in the portrait view (horizontal is fine!). My client has the same issues on his iPad. I do not exactly know the version, but I can figure it out if needed.
Is there a way with a quick css? You find everything you need in the private content.
Thanks a lot in advance!
David
Hey ninasmith,
We apologize for the delayed response.
Can you try adding this css code in Quick CSS, located in Enfold > General Styling:@media only screen and (min-width:990px) and (max-width:1024px) { .home #fullscreen_slider_1 { display: none !important; } .home #fullscreen_slider_2 { display: block !important; } .home #fullscreen_slider_2 .avia-caption-title, .home #fullscreen_slider_2 .avia-caption-content { visibility: visible; } }Best regards,
NikkoHey Nikko,
thank you for your response. Unfortunately this did not work out. The tablet emulator in the customizer shows it fine but on my iPad Pro it is still looking wrong. I already deleted the cache, but that did not help as well. Do you have any other suggestions?
Thanks a lot and kind regards,
DavidHi ninasmith,
Can you try to replace this part of the code I gave:
@media only screen and (min-width:990px) and (max-width:1024px) {to:
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {I got it from: https://webdevpuneet.com/media-query-for-ipad-pro-css/
Hope it helps.Best regards,
NikkoHey Nikko,
Thanks… but unfortunately, this did not help out either. Still the same issue.
Best regards,
DavidHey guys,
Thanks a lot for the hints. I have tried both versions of the css code again and cleared the iPad cache several times in between. Unfortunately, it did not work out. Any other suggestions? Thank you in advance!
Kind regards,
DavidHi,
I just want to tell you that I will be out of office for a few days. I will check this thread again in a week. Hope we will find a solution.
Thanks a lot
DavidHi,
Add this to quick css:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .av-single-slide.slide-1.active-slide{ background-size:1024px!important; }}Best regards,
Jordan ShannonHey Jordan,
thank you. I think we are coming the solution closer and closer.
On the iPhone X the view is nearly perfect. I would just need a bit more space on the right and the left so the image will not get cut (see screenshot).
On the iPad Pro it looks a little strange. The image is a bit to small and gets shown several times on top of each other (see screenshot). And I also do not want to show the logo in the menu bar on tablets. I already hided this with an css on the mobile view.
On Android it looks perfekt btw (see screenshot). That is what I want ;-)
If this is all to tricky, what I do not think, maybe there is another solution? Maybe with a fullwidth slider…
Thank you in advance!
DavidHey guys,
I just want to add, that I can provide the logo in every possible ratio if needed. I could make one for desktops, one for smartphones, one for iPad Pro etc… Would that help?
Kind regards,
DavidHi,
Thank you for the update.
The following css code should constrain the width of the background image to only within the slider container.
@media only screen and (max-height: 1366px) { .home #fullscreen_slider_2 .avia-slideshow > ul > li { background-size: contain; } }Apply a unique css class or ID to the slider if you want to replace the default selectors.
// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
IsmaelHi Ismael,
I think I must have read nearly all of your fullscreen slider posts in this forum ;-) Thanks for your help!
Unfortunately, I am still struggling… I added your css, but it still looks weird. I also checked out your link with the unique css, but I do not know what to add there. Any chance one of you guys can help me out with that? I think I will be streched to my limits soon. I still can provide you with any image size you need!
Thanks a lot!
DavidHi,
Thank you for the update.
Did you remove the browser cache after adding the code and before checking the page? Is the Performance > File Compression settings disabled? If not, please disable the settings temporarily prior to checking the page. The css code above should contain the background image and prevent it from overflowing outside the slider.
Best regards,
IsmaelHey guys,
Thanks for your help. Unfortunately, all of these hints did not work out in my case. Quite possibly that I am doing something wrong… I do not know. Anyway, I figured out an interim solution by using a mixture of the fullscreen slider and a colour section with another image. It took me a while but now it looks (nearly) perfect on any device, even on the iPad Pro. I will give it a new try another time. Nevertheless I am grateful for every hint. If somebody is interested in my solution, just send me a message and I will write it down here when I have a minute.
Best regards,
DavidHi David,
Sorry for the problems and thanks for the update. Are you ok with using your other method then? We’ll leave this thread open in case you should need any further help on the topic.
Best regards,
RikardHi Rikard,
Thank you for your message. For the moment I am fine with my solution. I will keep it that way for now. The fullscreen slider is a cool component of Enfold but I have to accept that it is not the best idea in my case, especially not for the iPad Pro – at least not until I improve my css skills or hire a freelancer for my special needs ;-)
Kind regards,
David
- You must be logged in to reply to this topic.