Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 10, 2017 at 11:35 am #806291
    bejan2k

    Hi there,
    Firstly great theme, just started working on it and really customisable.

    I need your help I’m trying to get the pagination dots on the slider for mobile to appear in the centre of the screen above the downwards arrow at the moment they are currently sitting in the far left of the screen and would prefer to be in the middle.

    I did previously put in some CSS code to make the white arrows on the slider always show on mobile and not hide i put this in and it solved the arrows issue on mobile but made the pagination dots go to the far left can you help or give some css code to fix this?

    @media only screen and (max-width: 767px) {
    .responsive #top .avia-slideshow-controls a { display:block !important; }
    }

    Thanks
    bejan

    June 10, 2017 at 11:39 am #806292
    bejan2k

    I also have another small issue with the fullscreen slider and that is my images seem cropped on mobile view it seems to pin to the left. Is there a way that i can have my images snap to show the centre of them when in mobile view?

    June 10, 2017 at 4:00 pm #806322
    Mike

    Hi,
    please change your code to this:

    @media only screen and (max-width: 767px) {
.responsive #top .avia-slideshow-controls a { display: inline-block !important; }
}

    Best regards,
    Mike

    June 10, 2017 at 4:13 pm #806325
    bejan2k

    Thanks Mike the toggle dots are working now!:) I also explored and found how to align the images to centre so no worrys about thats.

    Just a another question is there a way to set the slider to have a minimum height for mobile I.e 480px as when previewed on mobile the toggle controls are alot lower instead of centre of the image i currently cant see the pagination dots without scrolling up and the image on mobile extends lower so i have to scroll up the view the extra bit of the image rather then see it all in full view

    would really appreciate if you could suggest a way to fix this

    thank you!

    June 10, 2017 at 6:05 pm #806348
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
.avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {height: 87vh!important; }}

    Best regards,
    Mike

    June 10, 2017 at 6:21 pm #806351
    bejan2k

    Just tried that now but the pagination dots are still underneath the IOS toolbar and the slider toggle arrows seem slightly lower at first load. Is there another code i could try to make the image, arrows and pagination sit above the ios toolbar?

    thanks
    Bejan

    June 10, 2017 at 8:45 pm #806364
    Mike

    Hi,
    OK, give it a try now, I changed it to 70vh. Please clear your cache: [http://www.refreshyourcache.com/en/home/]
    & note it maybe different depending on if your login or a site visitor :)

    Best regards,
    Mike

    June 11, 2017 at 1:15 pm #806556
    bejan2k

    Hi Mike thats perfect thank you worked just fine all solved :) thanks Bejan

    June 11, 2017 at 1:58 pm #806558
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Toggle dots on mobile’ is closed to new replies.