Okay
  Public Ticket #2895795
Nectar Slider Arrows on Mobile Devices
Closed

Comments

  •  2
    Craig Hindman started the conversation
    October 16, 2021 at 1:23am

    Hi team,

    I have an odd situation where the arrows on the Slider (Day One to Day Five) on iPad and mobile display incorrectly. Do you have any ideas why and how to fix? There are no controls for this other than on/off.

    Thanks for your help!

    Craig

    https://adventureartphotography.com.au/flinders-ranges-photography-tour/

  •  8,844
    Tahir replied
    October 16, 2021 at 1:55pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 999px) {
    .nectar-simple-slider .flickity-prev-next-button.previous {
        left:10px !important;
    }
    .nectar-simple-slider .flickity-prev-next-button.next {
        right: 10px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Craig Hindman replied
    October 17, 2021 at 7:11am

    Hmmm - that moves the arrows and the circle in 10 Pixels on each side but the arrow symbols themselves are still funky...

    Meanwhile Mobile and iPad previews display correctly in Customise preview... any other ideas? See attachment.



  •  1,878
    Judith replied
    October 18, 2021 at 3:37pm

    Hi Craig,

    Please try this css:

    @media only screen and (max-width: 999px){
    .nectar-simple-slider .flickity-prev-next-button.previous {
        left: 7px !important;
    }
}
@media only screen and (max-width: 999px){
    .nectar-simple-slider .flickity-prev-next-button.next {
        right: 20px !important;
    }
}

    Thanks.

  •  2
    Craig Hindman replied
    October 20, 2021 at 12:24am

    Thanks Judith. Still no luck. It moves the whole arrow and circle - not the arrowhead. See attached...



  •  2
    Craig Hindman replied
    October 20, 2021 at 12:40am

    Address below so you can see on your own device. Happens on iPad and iPhone...

    https://adventureartphotography.com.au/flinders-ranges-photography-tour/

  •  1,878
    Judith replied
    October 20, 2021 at 3:33pm

    Hi Craig,

    This is what I am getting from my end:

    6188803688.png

    Is it possible you could send us the screen dimensions so that we can capture the misalignment accurately.

    Thanks.

  •  2
    Craig Hindman replied
    October 21, 2021 at 12:04am

    Thanks Judith!

    It shows up as expected on the previews - it's just on the actual devices it is not showing up properly. I have an iPad Air, iPhone 11, and iPhone 12 and the problem is the same. My client has an iPad Air and iPhone 11 and get's the same error.

    As you can see from your screen capture - the CSS code you are providing moves the whole arrow circle/arrow block. (7px on the left and 20px on the right as per your code). 

    But the issue is with the actual arrowhead itself - not the block.

    See screen captures from iPad (2,360 × 1,640 px) same problem in portrait or landscape.

    This is the same on iPhone.

    When i preview on the mockup iphone like you have - it works fine. When I view on an ACTUAL iphone or ipad - it's not working. Am trying on both Safari and chrome FYI.

    Thanks for helping me troubleshoot this one!

    Craig


  •  2
    Craig Hindman replied
    October 21, 2021 at 12:29am

    Perhaps there's a way to replace the arrow elements with a fixed icon?

  •  8,844
    Tahir replied
    October 21, 2021 at 5:20pm

    Have escalated to the Developer for further response.

    Thanks 

    ThemeNectar Support Team 

  •  1,071
    ThemeNectar replied
    October 21, 2021 at 8:03pm

    Hey Craig!

    The following CSS snippet should correct that spacing issue:

    body .nectar-simple-slider .flickity-prev-next-button {
    padding: 0!important;
}

    You can remove the previously provided snippets as well.

    Kind regards,

  •  2
    Craig Hindman replied
    October 21, 2021 at 11:12pm

    Boom!

    Thank you!! Appreciate you following this through :)

    Cheers,

    Craig

  •  1,071
    ThemeNectar replied
    October 22, 2021 at 12:17am

    You're welcome Craigsmile.png

    Cheers