Home › Forums › Arnold WordPress Theme › Slider and back to top in mobile version

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 4, 2019 at 8:26 pm #18406
    Marianitx
    Participant
    Purchased
    Expired

    Hi, I just implemented the ‘back to top’ button on mobile version adding following code, as you explained in this post.

    .ux-mobile #back-top {
    display: block;
}

    It works perfectly, BUT, the look is awkward. It gets overlapped by the footer, and as there is obviously no rollover effect in mobile version, there is no animation. In fact, what you see is just an horizontal line, which makes it quite difficult to understand. Is there any other way to make it user-friendlier?

    This happens also in the slider template for posts. You just see one of the pictures of the slider, but there is no arrow pointing to left or right, which makes difficult to understand that this is a slider and that there are pictures further. Is there any solution for that? I can click and go left or right, but someone new at the website won’t guess that and might think that there is only one picture in that post.

    thanks again!

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 5, 2019 at 1:34 am #18413
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please use the custom CSS, they will be an arrow by default on the mobile device.

    Please paste the custom CS code to “Appearance > Customize: Additional CSS”:

    .touchevents #back-top:before, .touchevents #ux-slider-down:before {
    -webkit-transform: translate(2px,-15px) rotate(-60deg);
    -moz-transform: translate(2px,-15px) rotate(-60deg);
    -ms-transform: translate(2px,-15px) rotate(-60deg);
    transform: translate(2px,-15px) rotate(-60deg);
}
.touchevents #back-top:hover:after, .touchevents #ux-slider-down:hover:after {
    -webkit-transform: translate(2px,-12px) rotate(60deg);
    -moz-transform: translate(2px,-12px) rotate(60deg);
    -ms-transform: translate(2px,-12px) rotate(60deg);
    transform: translate(2px,-12px) rotate(60deg);
}
.touchevents #back-top:after, .touchevents #ux-slider-down:after {
    left: 20px;
    -webkit-transform-origin: 3px 0;
    -moz-transform-origin: 3px 0;
    -ms-transform-origin: 3px 0;
    transform-origin: 3px 0;
}

    Regards!
    Bwsm – uiueux.com – Twitter – Facebook

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 5, 2019 at 9:11 pm #18424
    Marianitx
    Participant
    Purchased
    Expired

    Thanks for your answer. About the back to top button on mobile there might be something wrong with this code:

    Please paste the custom CS code to “Appearance > Customize: Additional CSS”:

    .touchevents #back-top:before, .touchevents #ux-slider-down:before {
    -webkit-transform: translate(2px,-15px) rotate(-60deg);
    -moz-transform: translate(2px,-15px) rotate(-60deg);
    -ms-transform: translate(2px,-15px) rotate(-60deg);
    transform: translate(2px,-15px) rotate(-60deg);
}
.touchevents #back-top:hover:after, .touchevents #ux-slider-down:hover:after {
    -webkit-transform: translate(2px,-12px) rotate(60deg);
    -moz-transform: translate(2px,-12px) rotate(60deg);
    -ms-transform: translate(2px,-12px) rotate(60deg);
    transform: translate(2px,-12px) rotate(60deg);
}
.touchevents #back-top:after, .touchevents #ux-slider-down:after {
    left: 20px;
    -webkit-transform-origin: 3px 0;
    -moz-transform-origin: 3px 0;
    -ms-transform-origin: 3px 0;
    transform-origin: 3px 0;
}

    This is what I see so far http://www.iso-typo.com/prueba , just half of the arrow.

    thanks!

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 6, 2019 at 2:33 am #18430
    SeaTheme
    Keymaster
    Purchased
    Expired

    Please add the custom CSS also:

    @media(max-width:767px) {
#back-top { right: 20px; }
}
.touchevents #back-top:after, .touchevents #ux-slider-down:after {
    -webkit-transform: translate(2px,-12px) rotate(60deg);
    -moz-transform: translate(2px,-12px) rotate(60deg);
    -ms-transform: translate(2px,-12px) rotate(60deg);
    transform: translate(2px,-12px) rotate(60deg);
}

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.