This topic contains 13 replies, has 2 voices, and was last updated by  jacobske 1 month, 3 weeks ago.

Soledad Slider Elements Animation

  • How do I remove the slider elements animation and have the slider text act like the Home Featured Box text–fixed in place. Or how do I fix it where the slider text and button are properly aligned when the slider changes orientation on a mobile device–make it properly responsive.

    When I use a smaller than suggested width and height slider (960×300) the slider title, caption, button initially render correctly on laptop and mobile device, but when I change the orientation of the mobile device (go from portrait to landscape) the slider title, caption, and button do not center on the resized (?responsive?) image.

    Thanks!

    • This topic was modified 1 month, 3 weeks ago by  jacobske.
    • This topic was modified 1 month, 3 weeks ago by  jacobske.

    Hi,

    Can you show me your site url?

    Best Regards,
    PenciDesign

    http://www.mikerogersad70.com

    Two options:

    1 – How do I remove the slider elements animation and have the slider text act like the Home Featured Box text–fixed in place.

    2 – Or how do I fix it where the slider text and button are properly aligned when the slider changes orientation on a mobile device–make it properly responsive.

    Thanks!

    Hi,

    1/ To do that, please add more this code to Customize > Custom CSS:

    .penci-slider .penci-active-slide .pencislider-container.penci-fadeInUp .pencislider-title, .penci-slider .penci-active-slide .pencislider-container.penci-fadeInUp .pencislider-caption, .penci-slider .penci-active-slide .pencislider-container.penci-fadeInUp .pencislider-content .penci-button{ -webkit-animation-name: none; -moz-animation-name: none; -o-animation-name: none; animation-name: none; }
    .penci-slider ul.slides li .pencislider-container .pencislider-content{ background: #fff; max-width: 500px; padding: 20px 0; }
    

    Note: You need to go to admin > Penci Slider > and change heading text color & sub-heading text color to black color to make it visible.

    2/ I’m not clearly about this question. Can you tell me more about it?

    Best Regards,
    PenciDesign

    2/ I’m not clearly about this question. Can you tell me more about it?

    When you change your mobile device from portrait to landscape why doesn’t the slider text, caption and button move to the center of the slider versus not lining up properly. If you look at our site in portrait on your cellphone and then change to landscape you will see what the problem is with the slider.

    Thanks!

    Hi,

    I saw it fine for both portrait & landscape. See this image

    Regards,
    PenciDesign

    The first time you go to the site it looks fine. If you immediately change the orientation of your mobile device you will see the problem. Do not reload the page when you change the orientation.

    See these images.

    • This reply was modified 1 month, 3 weeks ago by  jacobske.

    Hi,

    No. I checked it fine on mobile for the orientation. :)

    Best Regards,
    PenciDesign

    Did you look at both images I posted? First image is right, but the second image clearly shows there is a problem with the theme.

    I’m sorry, but on my Apple laptop in responsive design mode when I switch from portrait it does not look fine. The slider title moves off the slider image like the second image I provided you on Imagur.

    Also, on my iPhone 7 plus the same problem occurs when you switch screen orientations.

    Yes. I saw it before replied you.
    Can you show me the screenshots on your iPhone7 plus?
    Did you try with this issues on our demo. Example: http://pencidesign.com/soledad/soledad-beauty/?

    Best Regards,
    PenciDesign

    7s PLUS images

    portrait

    Landscape text off slider problem.

    Thanks for looking into this problem.

    Note: the Soledad Beauty demo slider has the same problem as Soledad Default Slider on a mobile device switching between portrait and landscape.

    “First time” you look at the Beauty demo it looks fine, but as soon as you change the screen orientation some of the text goes off the slider and doesn’t look professional.

    We like the Soledad theme and this is the only trouble we are having with it at this time.

    Hi,

    Oh yeah. This issues only appears for safari on mobile.
    Please add more this code to Customize > Custom CSS to fixed it:

    .penci-slider ul.slides li .pencislider-container{ top: 50% !important; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
    

    Best Regards,
    PenciDesign

    Oh yeah!

    Thanks for all the help!

    Time to do a happy dance.

    Kip

You must be logged in to reply to this topic.