Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1150260

    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

    #1151682

    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,
    Nikko

    #1151761

    Hey 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,
    David

    #1151775

    Hi 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,
    Nikko

    #1151832

    Hey Nikko,

    Thanks… but unfortunately, this did not help out either. Still the same issue.

    Best regards,
    David

    #1151901

    Hi,

    Did you try clearing the cache a few times over?

    Best regards,
    Jordan Shannon

    #1152286

    Hey 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,
    David

    #1152509

    Hey guys,

    I just checked the site on someones iPhone X and noticed, that the slider does not work there correctly as well (see screenshot). The logo gets cut. So I have one more problem now :-/

    Kind regards
    David

    • This reply was modified 1 month, 1 week ago by  ninasmith.
    #1152685

    Hi,

    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
    David

    #1153416

    Hi,

    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 Shannon

    #1155012

    Hey 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!
    David

    #1155617

    Hey 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,
    David

    #1156253

    Hi,

    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,
    Ismael

    #1156362

    Hi 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!
    David

    #1157137

    Hi,

    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,
    Ismael

    #1157610

    Hey 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,
    David

    • This reply was modified 2 weeks, 6 days ago by  ninasmith.
    #1157719

    Hi 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,
    Rikard

    #1157975

    Hi 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

    #1158166

    Hi David,

    I understand, thank for the update. Just let us know if you should need any further help from us.

    Best regards,
    Rikard

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.