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

This topic contains 3 replies, has 2 voices, and was last updated by  SeaTheme 6 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #18406

    Marianitx
    Participant
    Purchased

    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!

    #18413

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.comTwitterFacebook

    #18424

    Marianitx
    Participant
    Purchased

    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!

    #18430

    SeaTheme
    Keymaster
    Purchased
    Supported

    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);
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!